Integracja PWA z wbudowanymi interfejsami udostępniania dzięki Workbox

Jak sprawić, aby aplikacja PWA wyświetlała się obok aplikacji na poszczególne platformy w interfejsach udostępniania na poziomie systemu

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

Web Share Target API umożliwia wyświetlanie progresywnej aplikacji internetowej na poziomie systemu na arkuszu udostępniania po jej zainstalowaniu. Jeśli masz serwer, który może odbierać żądania, ta metoda działa świetnie. Jeśli nie, jej wdrożenie jest znacznie trudniejsze.

W tym artykule użyjemy Workbox, czyli zestawu bibliotek JavaScript do dodawania obsługi offline w aplikacjach internetowych, aby utworzyć adres URL celu udostępniania, który będzie znajdować się w całości w skrypcie service worker. Dzięki temu statyczne witryny i aplikacje jednostronicowe mogą służyć jako miejsca docelowe udostępniania bez dedykowanego punktu końcowego serwera.

Telefon z Androidem z otwartą szufladą „Udostępnij przez”.
Selektor celu udostępniania na poziomie systemu z zainstalowaną aplikacją PWA o nazwie Share Target Test jako opcją.

Na tej samej stronie

Jeśli nie wiesz, jak działa Web Share Target, przeczytaj artykuł Odbieranie udostępnionych danych za pomocą interfejsu Web Share Target API. Oto krótkie podsumowanie.

Wdrożenie funkcji docelowej udostępniania w internecie odbywa się w 2 etapach. Najpierw zaktualizuj plik manifestu aplikacji internetowej, aby wskazać, że po zainstalowaniu aplikacja ma być celem udostępniania. W tym przykładzie udostępnianie jest kierowane na adres URL /share za pomocą żądania POST. Jest on kodowany jako formularz wieloczęściowy, w którym tytuł jest oznaczony jako name, tekst jako description, a obrazy JPEG jako photos.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Udostępnianie celów skryptu service worker za pomocą Workbox

Zwykle jest to obsługiwane przez punkt końcowy serwera, ale w przypadku celu udostępniania możesz zarejestrować trasę bezpośrednio w usłudze Service Worker, aby obsługiwać żądanie. Dzięki temu aplikacja będzie mogła być celem udostępniania bez zaplecza.

W Workbox możesz to zrobić, rejestrując trasę obsługiwaną przez skrypt service worker. Zacznij od zaimportowania registerRoute z 'workbox-routing'. Zwróć uwagę, że jest zarejestrowany w przypadku trasy /share, czyli tej samej, która jest wymieniona w przykładzie manifestu aplikacji internetowej. W odpowiedzi wywołuje funkcję shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

Funkcja shareTargetHandler() jest asynchroniczna. Przyjmuje zdarzenie, czeka na dane formularza, a następnie pobiera z niego pliki multimedialne.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

Następnie możesz zrobić z tymi plikami, co tylko chcesz. Możesz je buforować. Możesz wysłać je w dowolne miejsce za pomocą żądania pobierania. Możesz nawet użyć innych opcji pliku manifestu, np. wyświetlać stronę z parametrami zapytania dotyczącymi innych udostępnionych elementów lub przechowywać dane i wskaźniki do multimediów w interfejsie Cache Storage API lub IndexedDB.

Możesz wypróbować tę funkcję w przykładowej aplikacji Fugu Journal i zobaczyć implementację service workera w kodzie źródłowym.

Jedną z częstych czynności jest wstrzymywanie udostępniania zasobów do czasu uzyskania lepszych połączeń sieciowych. Workbox obsługuje też okresową synchronizację w tle.

Podsumowanie

Share Target API to prosty sposób na głęboką integrację progresywnej aplikacji internetowej z urządzeniami użytkowników, dzięki czemu będzie ona działać tak samo jak aplikacje na konkretne platformy w przypadku kluczowego zadania, jakim jest udostępnianie treści między aplikacjami. Zwykle jednak wymaga to serwera, który może odbierać żądania. Dzięki wykorzystaniu Workbox do utworzenia trasy docelowej udostępniania bezpośrednio w skrypcie service worker aplikacja nie jest objęta tym ograniczeniem, co pozwala na działanie docelowego udostępniania w aplikacjach w trybie offline i bez zaplecza.

Zdjęcie: Elaine Casap, Unsplash