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

Aplikacje internetowe mogą korzystać z tych samych funkcji udostępniania dostarczonych przez system co aplikacje na danej platformie.

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 zależnym od platformy.

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 w internecie ma te możliwości i ograniczenia:

  • Można go używać tylko w witrynie, do której dostęp jest dostępny przez HTTPS.
  • Jeśli udostępnianie odbywa się w elemencie 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.
  • Krawędź: 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 przeglądarka nie wysyłała żądania 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 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 plikami – 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. Zwiększy to wygodę użytkowników. Dzięki temu nie tylko unikamy przekierowań, ale też zapewniamy, że udostępniony adres URL zapewni użytkownikom odpowiednie wrażenia w przypadku danego 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, przetestuj najpierw usługę navigator.canShare() i ją wywołaj. Następnie umieść 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ł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 elementu iframe firmy zewnętrznej, umieść iframe z atrybutem 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 to zobaczyć w działaniu w demonstracji na Glitch i 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 Trasa Świętego Mikołaja 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 aplikację Santa Tracker używał interfejsu Web Share API na Androidzie. 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 flagą.
  • Safari: 12.1

Źródło

Pokaż informacje o pomocy dotyczącej interfejsu API

Czy zamierzasz korzystać z interfejsu Web Share API? Twoja publiczna pomoc pomaga zespołowi Chromium ustalać priorytety funkcji 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 jak go używasz.