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

Jak sprawić, aby Twoja aplikacja PWA wyświetlała się obok aplikacji związanych z konkretną platformą w interfejsach udostępniania na poziomie systemu

Interfejs Web Share Target API umożliwia wyświetlanie progresywną aplikację internetową arkusza udostępniania na poziomie systemu użytkownika po jego zainstalowaniu. To świetnie działa, jeśli masz serwer gdy nie otrzymacie prośby, będzie o wiele trudniej podjąć pracę.

W tym artykule użyjemy funkcji Workbox, zestaw JavaScriptu bibliotek do dodania obsługi offline do aplikacji internetowych w celu utworzenia docelowego adresu URL udostępniania które w całości działa w skrypcie service worker. Pozwala to witrynom statycznym aplikacje jednostronicowe służą do udostępniania treści bez dedykowanego punktu końcowego serwera.

Telefon z Androidem z polem „Udostępnij przez” panel otwarty.
Selektor docelowych udostępniania na poziomie systemu z zainstalowaną aplikacją PWA o nazwie Share Target Test.

Na tej samej stronie

Jeśli nie wiesz, jak działa cel udostępniania w internecie, przeczytaj artykuł Odbieranie danych udostępnionych za pomocą udostępniania w internecie. Docelowy interfejs API zawiera szczegółowe omówienie. Oto krótka analiza.

Wdrożenie funkcji docelowego udziału w internecie składa się z 2 etapów. Po pierwsze, zaktualizuj manifest aplikacji internetowej, aby wskazać, że chcesz udostępniać aplikację. miejsce docelowe po zainstalowaniu. Ten przykład kieruje udostępnienia do adresu URL /share za pomocą żądania POST. Jest zakodowany jako wieloczęściowa postać z tytułem name, tekst to 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"]
      }
    ]
  }
}

Skrypty service workbox współdzielą cele Workbox

Choć zwykle jest obsługiwane przez punkt końcowy serwera, możesz łatwo udostępnić celem jest zarejestrowanie trasy bezpośrednio w mechanizmie Service Worker do obsługi użytkownika. Dzięki temu aplikacja będzie miała miejsce docelowe bez backendu.

W Workbox możesz to zrobić przez rejestrując trasę obsługiwaną przez skrypt service worker. Zacznij od zaimportowania registerRoute od: 'workbox-routing'. Zwróć uwagę, że jest ona zarejestrowana w /share, tę samą podaną w przykładowym pliku manifestu aplikacji internetowej. W w odpowiedzi wywołuje shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

Funkcja shareTargetHandler() jest asynchroniczna i przyjmuje zdarzenie, czekając (i 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 z nimi zrobić, co chcesz. Możesz je zapisać w pamięci podręcznej. Ty wysłać je gdzieś z prośbą o pobranie. Możesz też użyć drugiego adresu, plik manifestu, np. wyświetlanie strony z parametrami zapytania dla drugiej udostępniane elementy lub przechowywanie danych i wskaźników do nośnika w pamięci podręcznej Interfejs API lub IndexedDB.

Możesz ją wypróbować w przykładowej aplikacji Fugu Dziennik i wyświetlany skrypt service worker w swoim źródle .

Jedną z typowych rozwiązań jest zatrzymywanie udostępnionych zasobów do czasu, aż sieć polepszy dostępnych połączeń. Workbox obsługuje również okresowe tło synchronizację.

Podsumowanie

Interfejs Share Target API pozwala w prosty sposób zintegrować swoją sieć progresywną instalując aplikację na urządzeniach użytkowników, porównując je z aplikacjami zależnymi od platformy to ważne zadanie, jakim jest udostępnianie treści między aplikacjami. Zazwyczaj wymaga to jednak który może odebrać żądanie. Użycie Workbox do utworzenia udostępnienia docelowej trasy bezpośrednio w skryptach service worker, aplikacja jest wolna pozwala udostępniać cel w aplikacjach w trybie offline i bez z backendami.

Zdjęcie: Elaine Casap, Unsplash