Mit Workbox PWAs in integrierte Freigabe-UIs einbinden

So sorgen Sie dafür, dass Ihre PWA neben plattformspezifischen Apps in UIs zur Freigabe auf Systemebene angezeigt wird

Mit der Web Share Target API können Sie Ihre Progressive Web-App nach der Installation in der Freigabeliste eines Nutzers auf Systemebene anzeigen. Das funktioniert hervorragend, wenn Sie einen Server haben, der die Anfrage entgegennehmen kann. Andernfalls ist es viel schwieriger, die Funktion zum Laufen zu bringen.

In diesem Artikel verwenden wir Workbox, eine Reihe von JavaScript-Bibliotheken, mit denen Webanwendungen Offlineunterstützung hinzugefügt werden kann. Damit erstellen wir eine Ziel-URL für die Freigabe, die sich vollständig in Ihrem Service Worker befindet. So können statische Websites und Single-Page-Apps als Freigabeziele ohne dedizierten Serverendpunkt dienen.

Ein Android-Smartphone, auf dem die Leiste „Über“ geöffnet ist.
Auswahl des Freigabeziels auf Systemebene mit einer installierten PWA namens Share Target Test als Option.

Auf derselben Seite

Wenn Sie mit der Funktionsweise von Web Share Target nicht vertraut sind, finden Sie unter Freigegebene Daten mit der Web Share Target API empfangen eine ausführliche Einführung. Hier eine kurze Zusammenfassung:

Die Implementierung der Funktion „Ziel für Webfreigabe“ umfasst zwei Teile. Aktualisieren Sie zuerst das Manifest Ihrer Webanwendung, um anzugeben, dass Ihre App nach der Installation als Freigabeziel verwendet werden soll. Im folgenden Beispiel werden Freigaben über eine POST-Anfrage an die /share-URL weitergeleitet. Es ist als mehrteiliges Formular codiert, wobei der Titel name, der Text description und JPEG-Bilder photos heißen.


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

Service Worker teilen Ziele mit Workbox

Normalerweise wird die Anfrage von einem Serverendpunkt verarbeitet. Sie können aber auch eine Route direkt in Ihrem Service Worker registrieren, um die Anfrage zu verarbeiten. So kann Ihre App ohne Back-End als Freigabeziel verwendet werden.

Dazu registrieren Sie in Workbox eine Route, die von Ihrem Service Worker verarbeitet wird. Importieren Sie zuerst registerRoute aus 'workbox-routing'. Beachten Sie, dass er für die Route /share registriert ist, die auch im Beispiel-Manifest der Webanwendung aufgeführt ist. Daraufhin wird shareTargetHandler() aufgerufen.

import { registerRoute } from 'workbox-routing';

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

Die Funktion shareTargetHandler() ist asynchron. Sie nimmt das Ereignis entgegen, wartet auf die Formulardaten und ruft dann die Mediendateien ab.

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
};

Anschließend können Sie mit diesen Dateien machen, was Sie möchten. Sie können sie im Cache speichern. Sie können sie mit einer Abrufanfrage an eine andere Stelle senden. Sie können auch die anderen Manifestoptionen verwenden, z. B. eine Seite mit einigen Abfrageparametern für die anderen freigegebenen Elemente bereitstellen oder die Daten und Verweise auf die Medien in der Cache Storage API oder IndexedDB speichern.

Sie können es in der Beispiel-App Fugu Journal ausprobieren und sich die Implementierung des Dienstarbeiters im Quellcode ansehen.

Eine gängige Vorgehensweise besteht darin, freigegebene Ressourcen zu halten, bis bessere Netzwerkverbindungen verfügbar sind. Workbox unterstützt auch die regelmäßige Hintergrundsynchronisierung.

Fazit

Die Share Target API ist eine einfache Möglichkeit, Ihre Progressive Web-App tief in die Geräte der Nutzer einzubinden und sie bei der wichtigen Aufgabe des Teilens von Inhalten zwischen Apps mit plattformspezifischen Anwendungen gleichzustellen. Dazu ist jedoch in der Regel ein Server erforderlich, der die Anfrage empfängt. Wenn Sie mit Workbox eine Share Target-Route direkt in Ihrem Service Worker erstellen, ist Ihre App von dieser Einschränkung befreit. So kann Share Target auch für Apps funktionieren, die offline sind und keine Backends haben.

Foto von Elaine Casap auf Unsplash