Aplikacje internetowe mogą korzystać z tych samych udostępnianych przez system funkcji udostępniania co aplikacje na danej platformie.
Dzięki interfejsowi Web Share API aplikacje internetowe mogą korzystać z tych samych udostępnianych przez system funkcji udostępniania co aplikacje na danej platformie. Interfejs Web Share API umożliwia aplikacjom internetowym udostępnianie linków, tekstu i plików innym aplikacjom zainstalowanym na urządzeniu w taki sam sposób jak aplikacje przeznaczone dla danej platformy.
Możliwości i ograniczenia
Udostępnianie w internecie ma następujące możliwości i ograniczenia:
- Można go używać tylko w witrynie, do której można uzyskać dostęp przez HTTPS.
- Jeśli udostępnianie odbywa się w elemencie iframe innej firmy, należy użyć atrybutu
allow. - Musi być wywoływana w odpowiedzi na działanie użytkownika, na przykład kliknięcie. Wywołanie go za pomocą modułu obsługi
onloadjest niemożliwe. - Możesz udostępniać adresy URL, tekst lub pliki.
Udostępnianie linków i tekstu
Do udostępniania linków i tekstu użyj metody share(), która jest oparta na obietnicach z obiektem wymaganych właściwości.
Aby przeglądarka nie zwracała kodu TypeError, obiekt musi zawierać co najmniej jedną z tych właściwości: title, text, url lub files. Możesz na przykład udostępnić tekst bez adresu URL lub na odwrót. Zezwolenie wszystkim 3 użytkownikom zwiększa elastyczność przypadków użycia. Wyobraź sobie, że po uruchomieniu poniższego kodu użytkownik wybrał jako aplikację docelową aplikację e-mail. Parametr title może stać się tematem e-maila, text, treścią wiadomości oraz plikami i załącznikami.
if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'https://web.dev/',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}
Jeśli masz w witrynie kilka adresów URL tych samych treści, zamiast bieżącego adresu URL podaj kanoniczny URL strony. Zamiast udostępniać tag document.location.href, sprawdź kanoniczny URL <meta> w elemencie <head> strony i go udostępnij. Zwiększy to wygodę użytkownika. Nie tylko zapobiega przekierowywaniu, ale także zapewnia, że udostępniany adres URL działa poprawnie w przypadku danego klienta. Na przykład jeśli znajomy udostępnia adres URL dla urządzeń mobilnych, który wyświetli się na komputerze, powinna wyświetlić się wersja komputerowa:
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({url});
Udostępnianie plików
Aby udostępnić pliki, najpierw przetestuj połączenie z usługą navigator.canShare() i wywołaj połączenie z nim. Następnie uwzględnij tablicę plików w wywołaniu funkcji navigator.share():
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Vacation Pictures',
text: 'Photos from September 27 to October 14.',
})
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing files.`);
}
Zwróć uwagę, że przykład obsługuje wykrywanie funkcji przez testowanie pod kątem navigator.canShare(), a nie navigator.share().
Obiekt danych przekazany do canShare() obsługuje tylko właściwość files.
Można udostępniać niektóre typy plików audio, graficzne, PDF, wideo i tekstowe.
Pełną listę znajdziesz w artykule Dozwolone rozszerzenia plików w Chromium. W przyszłości możemy dodać więcej typów plików.
Udostępnianie w elementach iframe innych firm
Aby wywołać działanie udostępniania w elemencie iframe innej firmy, umieść go za pomocą atrybutu allow o wartości web-share:
<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
Możesz zobaczyć, jak to wygląda w praktyce w wersji demonstracyjnej Glitch i wyświetlić kod źródłowy.
Jeśli nie podasz tego atrybutu, pojawi się NotAllowedError z komunikatem Failed to execute 'share' on 'Navigator': Permission denied.
Studium przypadku: Trasa Świętego Mikołaja
Trasa Świętego Mikołaja, projekt typu open source, to w Google świąteczna tradycja. W grudniu możesz obchodzić te święta dzięki grom i doświadczeniom edukacyjnym.
W 2016 roku zespół Trasa Świętego Mikołaja użył interfejsu Web Share API na Androidzie. Ten interfejs API idealnie nadaje się na urządzenia mobilne. W poprzednich latach zespół usunął przyciski udostępniania na urządzeniach mobilnych, bo miejsce na urządzenia jest na pierwszym miejscu i nie mógł uzasadnić wdrożenia kilku wspólnych celów.
Jednak dzięki interfejsowi Web Share API mogliśmy pokazać jeden przycisk, co pozwoliło zaoszczędzić cenne piksele. Okazało się też, że użytkownicy udostępniali dane w internecie o około 20% więcej niż użytkownicy bez włączonego interfejsu API. Otwórz Trasa Świętego Mikołaja, aby zobaczyć, jak działa udostępnianie danych w internecie.
Obsługiwane przeglądarki
Obsługa interfejsu Web Share API przez przeglądarki jest bardzo skomplikowana. Zalecamy korzystanie z wykrywania funkcji (jak opisano we wcześniejszych przykładach kodu) zamiast zakładania, że obsługiwana jest konkretna metoda.
Poniżej znajdziesz omówienie ogólnych sposobów, w jakie można korzystać z tej funkcji. Szczegółowe informacje znajdziesz, klikając jeden z linków pomocy.
navigator.canShare()navigator.share()
Pokaż obsługę interfejsu API
Czy zamierzasz korzystać z interfejsu Web Share API? Twoja publiczna pomoc pomaga zespołowi Chromium priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.
Wyślij tweeta na adres @ChromiumDev, używając hashtagu #WebShare, i daj nam znać, gdzie i w jaki sposób go używasz.