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

Jak wyświetlać swoją PWA obok aplikacji platformowych w interfejsie udostępniania na poziomie systemu

Interfejs Web Share Target API umożliwia wyświetlanie aplikacji Progressive Webarkuszu udostępniania na poziomie systemu użytkownika po jej zainstalowaniu. Ta metoda działa świetnie, jeśli masz serwer, na którym możesz odbierać żądania, ale jeśli go nie masz, staje się to dużo trudniejsze.

W tym artykule użyjemy Workboxa, czyli zestawu bibliotek JavaScript służących do dodawania obsługi offline do aplikacji internetowych, aby utworzyć adres URL docelowy do udostępniania, który znajduje się całkowicie w Twoim skrypcie service worker. Dzięki temu witryny statyczne i aplikacje jednostronicowe mogą służyć jako cele udostępniania bez dedykowanego punktu końcowego serwera.

Telefon z Androidem z otwartą szufladą „Udostępnij przez”.
Element selektora udostępniania na poziomie systemu z opcją zainstalowanej progresywnej aplikacji internetowej o nazwie Share Target Test.

Na tej samej stronie

Jeśli nie wiesz, jak działa interfejs Web Share Target, zapoznaj się z artykułem Odbieranie udostępnionych danych za pomocą interfejsu Web Share Target API, w którym znajdziesz szczegółowe wprowadzenie. Oto krótkie omówienie.

Wdrożenie funkcji kierowania na udostępnianie 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ępnienia są kierowane do adresu URL /share za pomocą żądania POST. Jest on zakodowany jako formularz wieloczęściowy, w którym tytuł ma nazwę 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"]
      }
    ]
  }
}

Docelowe obiekty udostępniania skryptu service worker w Workbox

Zazwyczaj jest to obsługiwane przez punkt końcowy serwera, ale w przypadku celu udostępniania możesz użyć sprytnego triku, rejestrując trasę bezpośrednio w obsługiwanym przez siebie komponencie service worker. Dzięki temu Twoja aplikacja będzie mogła być celem udostępniania bez backendu.

Aby to zrobić, w Workbox zarejestruj ścieżkę obsługiwaną przez skrypt service worker. Zacznij od zaimportowania pliku registerRoute z pliku 'workbox-routing'. Zwróć uwagę, że jest on zarejestrowany na potrzeby ścieżki /share, takiej samej jak w przykładowym pliku manifestu aplikacji internetowej. W odpowiedzi na to wywołuje funkcję shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

Funkcja shareTargetHandler() jest asynchroniczna i pobiera zdarzenie, czeka na dane formularza, a potem zwraca z nich 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 robić z tymi plikami, co tylko chcesz. Możesz je przechowywać w pamięci podręcznej. Możesz je wysłać gdzieś za pomocą żądania pobierania. Możesz też użyć innych opcji pliku manifestu, np. 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 w IndexedDB.

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

Jednym z częstych rozwiązań jest wstrzymanie udostępniania zasobów do czasu, gdy będą dostępne lepsze połączenia sieciowe. Workbox obsługuje też okresową synchronizację w tle.

Podsumowanie

Interfejs Share Target API to prosty sposób na głęboką integrację progresywnej aplikacji internetowej z urządzeniami użytkowników, dzięki czemu można udostępniać treści między aplikacjami na równi z aplikacją na daną platformę. Jednak zwykle wymaga to serwera, który będzie odbierał żądanie. Dzięki użyciu Workbox do utworzenia ścieżki docelowej udostępniania bezpośrednio w skrypcie service worker Twoja aplikacja nie jest ograniczona przez to ograniczenie, co pozwala na działanie celu udostępniania w aplikacjach w trybie offline i bez backendów.

Zdjęcie autorstwa Elaine CasapUnsplash