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

Co zrobić, aby aplikacja PWA była wyświetlana obok aplikacji na danej platformie w interfejsach udostępniania na poziomie systemu

Jeff Posnick

Joe Medley

Sam Richard

Interfejs Web Share Target API pozwala wyświetlać progresywną aplikację internetową w arkuszu udostępniania na poziomie systemowym użytkownika, gdy zostanie zainstalowana. Świetnie się to sprawdza, gdy masz serwer dostępny do odbierania żądań, ale znacznie trudniej jest rozpocząć pracę, jeśli go nie masz.

W tym artykule użyjemy Workbox, czyli zestawu bibliotek JavaScript, które pozwalają dodać obsługę offline do aplikacji internetowych, aby utworzyć docelowy URL udostępniania, który znajduje się w całości w skrypcie service worker. Dzięki temu witryny statyczne i aplikacje jednostronicowe mogą być wykorzystywane jako cele współużytkowania bez dedykowanego punktu końcowego serwera.

Na tej samej stronie

Jeśli nie wiesz, jak działa cel udostępniania w sieci, więcej informacji znajdziesz w artykule Otrzymywanie udostępnionych danych za pomocą interfejsu Web Share API. Oto krótka recenzja.

Wdrożenie funkcji docelowego udziału w sieci składa się z 2 etapów. Najpierw zaktualizuj plik manifestu aplikacji internetowej, aby wskazać, że po zainstalowaniu aplikacja ma być celem udostępniania. Poniższy przykład kieruje udostępnienia do adresu URL /share za pomocą żądania POST. Jest zakodowany jako postać wieloczęściowa, której tytuł to name, tekst – description, a obrazy JPEG – photos.

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

Cele udostępniania skryptu service worker za pomocą Workbox

Choć zwykle jest obsługiwany przez punkt końcowy serwera, w przypadku miejsca docelowego udziału możesz zarejestrować trasę bezpośrednio w skrypcie service worker na potrzeby obsługi żądania. Dzięki temu Twoja aplikacja będzie miejscem docelowym udostępniania bez backendu.

Możesz to zrobić w Workbox, rejestrując trasę obsługiwaną przez skrypt service worker. Zacznij od zaimportowania registerRoute z platformy 'workbox-routing'. Zwróć uwagę, że jest zarejestrowana dla trasy /share – tej samej, którą podano w pliku manifestu przykładowej aplikacji internetowej. W odpowiedzi wywołuje polecenie shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

Funkcja shareTargetHandler() jest asynchroniczna, pobiera zdarzenie, czeka na dane formularza, a potem 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
};

Możesz potem robić z nimi, co tylko chcesz. Możesz je buforować. Możesz je wysłać do innego miejsca za pomocą żądania pobrania. Możesz nawet użyć innych opcji manifestu, na przykład wyświetlić stronę z parametrami zapytania dla 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ć ją w przykładowej aplikacji Fugu Journal i zobaczyć implementację skryptu service worker w jej kodzie źródłowym.

Jedną z częstych czynności jest wstrzymanie udostępnionych zasobów do czasu, gdy dostępne będą lepsze połączenia sieciowe. Skrzynka robocza obsługuje też okresową synchronizację w tle.

Podsumowanie

Interfejs Share Target API to prosty sposób na ścisłą integrację progresywnej aplikacji internetowej z urządzeniami użytkowników, dzięki czemu jej dostępność na równi z aplikacjami na danej platformie jest kluczowa, jeśli chodzi o udostępnianie treści między aplikacjami. Zazwyczaj wymaga to jednak dostępności serwera, który może odebrać żądanie. Wykorzystując Workbox do utworzenia docelowej trasy udostępniania bezpośrednio w skrypcie service worker, Twoja aplikacja nie jest objęta tym ograniczeniem, co umożliwia działanie tego typu aplikacji w trybie offline i bez backendów.

Zdjęcie: Elaine Casap, Unsplash