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

Aplikacje internetowe mogą korzystać z tych samych funkcji udostępniania dostarczanych przez system, co aplikacje na konkretne platformy.

Joe Medley
Joe Medley
GitHub

Dzięki interfejsowi Web Share API aplikacje internetowe mogą korzystać z tych samych funkcji udostępniania dostarczanych przez system co aplikacje 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 aplikacje na konkretną platformę.

Selektor docelowy udostępniania na poziomie systemu z zainstalowaną aplikacją PWA jako opcją.
Selektor celu udostępniania na poziomie systemu z zainstalowaną progresywną aplikacją internetową jako opcją.

Możliwości i ograniczenia

Funkcja udostępniania w internecie ma te możliwości i ograniczenia:

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

Browser Support

  • Chrome: 128.
  • 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 obietnicach i wymaga obiektu właściwości. Aby przeglądarka nie zgłaszała błędu 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. Umożliwienie korzystania ze wszystkich 3 elementów zwiększa elastyczność przypadków użycia. Wyobraź sobie, że po uruchomieniu poniższego kodu użytkownik wybrał aplikację poczty e-mail jako miejsce docelowe. Parametr title może stać się tematem e-maila, parametr text – treścią wiadomości, a pliki – 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ć document.location.href, sprawdź, czy na stronie w sekcji <head> znajduje się tag kanonicznego adresu URL <meta>, i udostępnij go. Zapewni to użytkownikowi lepsze wrażenia. Nie tylko pozwala to uniknąć przekierowań, ale też zapewnia, że udostępniony adres URL zapewnia odpowiednie wrażenia użytkownika w przypadku danego klienta. Jeśli na przykład znajomy udostępni Ci mobilny adres URL, a Ty otworzysz go na komputerze, powinna wyświetlić się wersja na komputery:

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 funkcja navigator.canShare() jest dostępna, i wywołaj ją. Następnie w wywołaniu funkcji navigator.share() umieść 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 w przykładzie wykrywanie uchwytów odbywa się przez testowanie navigator.canShare(), a nie navigator.share(). Obiekt danych przekazywany do funkcji canShare() obsługuje tylko właściwość files. Możesz udostępniać niektóre typy plików audio, graficznych, PDF, wideo i tekstowych. Pełną listę znajdziesz w artykule Permitted File Extensions in Chromium (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 firmy zewnętrznej, umieść ramkę 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>

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.

Śledzenie Świętego Mikołaja to projekt open source, który jest w Google tradycją świąteczną. W każdym grudniu możesz świętować ten okres, korzystając z gier i materiałów edukacyjnych.

W 2016 roku zespół Tras Świętego Mikołaja użył 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ż przestrzeń jest tam bardzo cenna i nie można było uzasadnić obecności kilku elementów do udostępniania.

Dzięki interfejsowi Web Share API mogli jednak wyświetlać tylko jeden przycisk, oszczędzając cenne piksele. Stwierdzili też, że użytkownicy, którzy korzystali z Web Share, udostępniali treści o około 20% częściej niż użytkownicy, którzy nie mieli włączonego tego interfejsu API. Otwórz Trasę Świętego Mikołaja, aby zobaczyć, jak działa Web Share.

Obsługa przeglądarek

Obsługa interfejsu Web Share API w przeglądarkach jest zróżnicowana, dlatego zalecamy używanie wykrywania funkcji (jak opisano 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 w jednym z tych artykułów pomocy.

navigator.canShare()

Browser Support

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

Source

navigator.share()

Browser Support

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

Source

Wyrażanie poparcia dla interfejsu API

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

Wyślij tweeta do @ChromiumDev z hasztagiem #WebShare i napisz, gdzie i jak korzystasz z tej funkcji.