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

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

Joe Medley
Joe Medley

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.

Selektor docelowego udziału na poziomie systemu z zainstalowaną aplikacją PWA jako opcją.
Selektor docelowego udziału na poziomie systemu z zainstalowaną aplikacją PWA jako opcją.

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 onload jest niemożliwe.
  • Możesz udostępniać adresy URL, tekst lub pliki.

Obsługa przeglądarek

  • 89
  • 93
  • 12.1

Źródło

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

Aplikacja Trasa Świętego Mikołaja z przyciskiem udostępniania.
Przycisk udostępniania Trasy Ś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()

Obsługa przeglądarek

  • 89
  • 93
  • 14

Źródło

navigator.share()

Obsługa przeglądarek

  • 89
  • 93
  • 12.1

Źródło

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.