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 na konkretne platformy.

Selektor docelowych użytkowników do udostępniania na poziomie systemu z opcją zainstalowanej aplikacji PWA.
Element udostępniania na poziomie systemu z opcją wyboru zainstalowanej progresywnej aplikacji internetowej.

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 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.

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

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 dostęp wszystkim 3 osobom zwiększa elastyczność zastosowań. 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ępniać pliki, najpierw sprawdź, czy masz zainstalowaną aplikację navigator.canShare() i czy możesz z niej korzystać. 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 iframe innej firmy, 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 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 materiałom edukacyjnym.

W 2016 r. zespół odpowiedzialny za projekt Trasa Ś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 użyć tylko jednego przycisku, oszczędzając cenne piksele. Okazało się też, że użytkownicy korzystający z Web Share udostępniali treści o okoł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()

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 14.

Source

navigator.share()

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

Pokaż pomoc dotyczącą interfejsu API

Zamierzasz używać 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 do @ChromiumDev, używając hashtaga #WebShare, i podaj, gdzie i jak go używasz.