Integracja z interfejsem użytkownika systemu operacyjnego za pomocą interfejsu Web Share API

Aplikacje internetowe mogą korzystać z tych samych funkcji udostępniania, które są dostępne w przypadku aplikacji na konkretne platformy.

Joe Medley
Joe Medley
GitHub

Dzięki interfejsowi Web Share API aplikacje internetowe mogą korzystać z tych samych funkcji udostępniania, które są dostępne w przypadku aplikacji na konkretne platformy. 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 aplikacjom platformowym.

Selektor docelowych urządzeń do udostępniania na poziomie systemu z opcją zainstalowanej aplikacji PWA.
Element udostępniania na poziomie systemu z opcją zainstalowanej PWA.

Możliwości i ograniczenia

Udostępnianie przez internet ma te możliwości i ograniczenia:

  • Można go używać tylko w witrynie, do której dostęp uzyskuje się przez HTTPS.
  • Jeśli udostępnianie odbywa się w ramce iframe innej firmy, należy użyć atrybutu allow.
  • Musi być wywoływany w odpowiedzi na działanie użytkownika, np. kliknięcie. Nie można go wywołać za pomocą obsługi onload.
  • Możesz udostępniać adresy URL, tekst lub pliki.

Obsługa przeglądarek

  • Chrome: 89.
  • Edge: 93.
  • Firefox: za pomocą flagi.
  • Safari: 12.1.

Źródło

Udostępnianie linków i tekstu

Aby udostępniać linki i tekst, użyj metody share(), która jest metodą opartą na obietnicy z wymaganym obiektem właściwości. Aby uniknąć błędu TypeError w przeglądarce, 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 odwrotnie. Zezwolenie na wszystkie 3 opcje zwiększa elastyczność przypadków użycia. Załóżmy, że po uruchomieniu kodu poniżej użytkownik wybrał jako cel aplikację poczty e-mail. Parametr title może stać się tematem e-maila, text, treścią wiadomości, a pliki mogą stać się 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 Twoja witryna ma wiele adresów URL dla tej samej treści, udostępnij kanoniczny adres URL strony zamiast bieżącego adresu URL. Zamiast udostępniać adres document.location.href, sprawdź, czy w pliku <head> strony <head> znajduje się tag <meta> kanonicznego adresu URL, i udostępnij go. Dzięki temu użytkownik będzie miał lepsze wrażenia. Dzięki temu nie tylko unikamy przekierowań, ale też zapewniamy użytkownikom odpowiednie wrażenia w przypadku określonego klienta. Jeśli na przykład znajomy udostępni Ci adres URL na urządzenie mobilne, a Ty otworzysz go na komputerze, powinieneś zobaczyć wersję na komputer:

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 sprawdź, czy masz zainstalowaną aplikację navigator.canShare() i uruchom ją. Następnie w wywołaniu funkcji navigator.share() podaj tablicę plików:

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ładowy kod obsługuje wykrywanie funkcji, testując navigator.canShare() zamiast navigator.share(). Obiekt danych przekazany do funkcji canShare() obsługuje tylko właściwość files. Można udostępniać określone typy plików audio, obrazów, PDF, wideo i tekstowych. 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 z poziomu ramki iframe innej firmy, umieść w niej atrybut 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 działa, w demonstracji na Glitch. Możesz też wyświetlić kod źródłowy. Jeśli nie podasz tego atrybutu, otrzymasz NotAllowedError z komunikatem Failed to execute 'share' on 'Navigator': Permission denied.

Studium przypadku: Trasa Świętego Mikołaja

Aplikacja Santa Tracker z przyciskiem udostępniania.
Przycisk udostępniania w Trasie Świętego Mikołaja.

Santa Tracker, projekt open source, to świąteczna tradycja w Google. Każdego grudnia możesz świętować ten okres dzięki grom i zajęciam edukacyjnym.

W 2016 r. zespół odpowiedzialny za Trasę Świętego Mikołaja używał na Androidzie interfejsu Web Share API. Ten interfejs API doskonale nadawał się do urządzeń mobilnych. W poprzednich latach zespół usunął przyciski udostępniania na urządzeniach mobilnych, ponieważ przestrzeń jest na wagę złota, a nie było uzasadnienia dla kilku celów udostępniania.

Dzięki interfejsowi Web Share API mogli jednak wyświetlić tylko 1 przycisk, oszczędzając cenne piksele. Okazało się też, że użytkownicy udostępniający treści za pomocą Web Share robili to o 20% częściej niż użytkownicy bez włączonego interfejsu API. Otwórz Trasa Świętego Mikołaja, aby zobaczyć, jak działa Udostępnianie w przeglądarce.

Obsługa przeglądarek

Obsługa interfejsu Web Share API w przeglądarkach jest zróżnicowana. Zalecamy korzystanie z wykrywania funkcji (jak w poprzednich przykładach kodu) zamiast zakładania, że dana metoda jest obsługiwana.

Oto ogólny zarys obsługi tej funkcji. Szczegółowe informacje znajdziesz, klikając jeden z linków do zespołu pomocy.

navigator.canShare()

Obsługa przeglądarek

  • Chrome: 89.
  • Edge: 93.
  • Firefox: za pomocą flagi.
  • Safari: 14.

Źródło

navigator.share()

Obsługa przeglądarek

  • Chrome: 89.
  • Edge: 93.
  • Firefox: za pomocą flagi.
  • Safari: 12.1.

Źródło

Pokaż informacje o pomocy dotyczącej interfejsu API

Zamierzasz używać interfejsu Web Share API? Twoje publiczne wsparcie pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta do @ChromiumDev, używając hashtaga #WebShare, i podaj, gdzie i jak go używasz.