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 tego samego udostępniania dostarczonego przez system jako aplikacje zależne od platformy. Interfejs Web Share API umożliwia aplikacjom internetowym udostępniaj linki, tekst i pliki innym aplikacjom zainstalowanym na urządzeniu jako aplikacje zależne od platformy.

.
Selektor miejsca docelowego udostępniania na poziomie systemu z opcją zainstalowanej aplikacji PWA.
. Selektor miejsca docelowego udostępniania na poziomie systemu z opcją zainstalowanej aplikacji PWA.

Możliwości i ograniczenia

Udostępnianie w internecie ma takie 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. Wywołuję za pomocą modułu obsługi onload.
  • Może udostępniać adresy URL, tekst i pliki.

Obsługa przeglądarek

  • Chrome: 89.
  • Krawędź: 93.
  • Firefox: za flagą.
  • Safari: 12.1

Źródło

Udostępnianie linków i tekstu

Do udostępniania linków i tekstu używaj metody share(), która opiera się na obietnicach z wymaganym obiektem właściwości. Aby uniemożliwić przeglądarce zgłoszenie TypeError, obiekt musi zawierać co najmniej jeden element z tych właściwości: title, text, url lub files. Ty możesz na przykład udostępnić tekst bez adresu URL lub odwrotnie. Zezwalam na wszystkie 3 zwiększają elastyczność przypadków użycia. Wyobraź sobie, że po uruchomieniu kodu poniżej użytkownik wybrał jako docelową aplikację pocztową. Parametr title może stać się tematem e-maila, text, treścią wiadomości, a pliki załączniki.

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 kilka adresów URL prowadzących do tej samej treści, podaj adres strony kanoniczny adres URL zamiast bieżącego. Zamiast udostępniać document.location.href, sprawdź tag <meta> kanonicznego adresu URL w <head> strony i udostępnij go. Zwiększy to wygodę korzystania z witryny użytkownika. Pozwala to nie tylko uniknąć przekierowań, ale też zapewnić, że udostępniany adres URL dostosowane do potrzeb konkretnego klienta. Jeśli na przykład znajomy korzysta z URL-a dla urządzeń mobilnych i oglądasz go na komputerze, powinna być widoczna 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, przetestuj najpierw usługę navigator.canShare() i ją wywołaj. Następnie dodaj tablica 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 służy do wykrywania funkcji przez testowanie 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 dźwiękowych, graficznych, pdf, wideo i tekstowych. Zobacz 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 innej firmy: umieść element 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 wersji demonstracyjnej Glitch. i wyświetl kod źródłowy. Jeśli nie podasz tego atrybutu, zobaczysz NotAllowedError z wiadomością 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 Trasy Świętego Mikołaja.

Trasa Świętego Mikołaja to projekt open source świątecznej tradycji w Google. W każdym grudniu można świętować ten święta z grami i edukacją.

W 2016 roku zespół Trasy Świętego Mikołaja korzystał z interfejsu Web Share API na Androidzie. Ten interfejs API idealnie pasował do urządzeń mobilnych. W poprzednich latach zespół usunął przyciski udostępniania na urządzeniach mobilnych, ponieważ ilość miejsca Premium i nie ma powodu, aby uzasadnić posiadanie kilku wartości docelowych.

A dzięki interfejsowi Web Share API mogli udostępnić jeden przycisk, i oszczędność cennych pikseli. Okazało się też, że użytkownicy udostępniali za pomocą Udostępniania w internecie około 20% więcej niż użytkownicy, którzy nie mają włączonego interfejsu API. Udaj się do Trasa Świętego Mikołaja, by zobaczyć, jak działa Udostępnianie w internecie.

Obsługa przeglądarek

Obsługa interfejsu Web Share API przez przeglądarkę jest różnie rozwijana. Zalecamy użycie tej funkcji wykrywania (jak opisano we wcześniejszych przykładach kodu), zamiast zakładać, że określona metoda jest obsługiwane.

Poniżej przedstawiamy ogólny zarys obsługi tej funkcji. Szczegółowe informacje znajdziesz w linkach do stron pomocy.

navigator.canShare()

Obsługa przeglądarek

  • Chrome: 89.
  • Krawędź: 93.
  • Firefox: za flagą.
  • Safari: 14.

Źródło

navigator.share()

Obsługa przeglądarek

  • Chrome: 89.
  • Krawędź: 93.
  • Firefox: za flagą.
  • Safari: 12.1

Źródło

Pokaż wsparcie dla interfejsu API

Czy zamierzasz korzystać z interfejsu Web Share API? Twoje publiczne wsparcie pomaga zespołowi Chromium nadaje priorytet funkcjom 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.