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

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

Joe Medley

Dzięki interfejsowi Web Share API aplikacje internetowe mogą korzystać z tych samych funkcji udostępniania, które są dostępne w aplikacjach 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 daną platformę.

Uwaga: udostępnianie to tylko połowa sukcesu. Aplikacje internetowe mogą też być miejscami docelowymi udostępniania, co oznacza, że mogą otrzymywać dane, linki, tekst i pliki z aplikacji na konkretne platformy lub z aplikacji internetowych. Aby dowiedzieć się, jak zarejestrować aplikację jako miejsce docelowe udostępniania, przeczytaj artykuł Odbieranie udostępnionych danych.

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

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 uzyskiwany 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, np. kliknięcie. Wywołanie go za pomocą modułu obsługi onload jest niemożliwe.
• Możesz udostępniać adresy URL, tekst lub pliki.

Browser Support

• 128
• 93
• 
• 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 z wymaganym obiektem właściwości. Aby zapobiec wyświetlaniu przez przeglądarkę 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. Zezwolenie na wszystkie 3 elementy zwiększa elastyczność przypadków użycia. Wyobraź sobie, że po uruchomieniu poniższego kodu użytkownik wybrał aplikację pocztową jako aplikację docelową. Parametr title może stać się tematem e-maila, 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 kilka 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 w sekcji <head> strony znajduje się tag kanonicznego adresu URL <meta>, i udostępnij go. Zapewni to użytkownikowi lepsze wrażenia. Pozwala to nie tylko uniknąć przekierowań, ale też zapewnia, że udostępniony adres URL wyświetla odpowiednie treści dla danego klienta. Jeśli na przykład znajomy udostępni mobilny adres URL, a Ty otworzysz go 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 sprawdź, czy jest dostępna funkcja navigator.canShare(), i wywołaj ją. Następnie dołącz tablicę plików w wywołaniu 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(), a nie navigator.share(). Obiekt danych przekazywany do canShare() obsługuje tylko właściwość files. Można udostępniać niektóre typy plików audio, obrazów, plików PDF, filmów i plików 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 ramki iframe innej firmy, 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

Przycisk udostępniania Trasy Świętego Mikołaja.

Trasa Świętego Mikołaja, projekt open source, to świąteczna tradycja w Google. W każdym grudniu możesz świętować przy grach i treściach edukacyjnych.

W 2016 r. zespół Trasy Ś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ż miejsce jest tam na wagę złota i 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. Odkryli też, że użytkownicy udostępniali treści za pomocą Web Share o około 20% częściej niż użytkownicy, którzy nie mieli włączonego 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 przez przeglądarki jest zróżnicowana. Zalecamy używanie wykrywania funkcji (jak opisano we wcześniejszych przykładowych kodach) zamiast zakładania, że dana metoda jest obsługiwana.

Oto ogólny zarys obsługi tej funkcji. Szczegółowe informacje znajdziesz pod jednym z linków do strony umożliwiającej wsparcie firmy.

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

Obsługa interfejsu API

Czy planujesz używać interfejsu Web Share API? Twoje publiczne wsparcie pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich obsługiwanie.

Wyślij tweeta do @ChromiumDev z hasztagiem #WebShare i daj nam znać, gdzie i jak używasz tej funkcji.

Przydatne linki

• Web Share Demos
• Scrapbook PWA