Mit Workbox PWAs in integrierte Freigabe-UIs einbinden

PWA neben plattformspezifischen Apps in Benutzeroberflächen für das Teilen auf Systemebene anzeigen lassen

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

Mit der Web Share Target API können Sie Ihre Progressive Web App nach der Installation in einem Freigabe-Sheet auf Systemebene anzeigen. Das funktioniert gut, wenn Sie einen Server haben, der die Anfrage empfangen kann. Wenn das nicht der Fall ist, ist es viel schwieriger, das zum Laufen zu bringen.

In diesem Artikel verwenden wir Workbox, eine Reihe von JavaScript-Bibliotheken zum Hinzufügen von Offlinesupport für Web-Apps, um eine Share-Target-URL zu erstellen, die sich vollständig in Ihrem Service Worker befindet. Dadurch können statische Websites und Single-Page-Apps als Freigabeziele ohne dedizierten Serverendpunkt dienen.

Ein Android-Smartphone, auf dem die Leiste „Teilen über“ geöffnet ist.
Systemauswahl für das Teilen auf Systemebene mit einer installierten PWA namens Share Target Test als Option.

Auf derselben Seite

Wenn Sie nicht wissen, wie Web Share Target funktioniert, finden Sie in Shared data with the Web Share Target API (Freigabe von Daten mit der Web Share Target API) eine ausführliche Einführung. Hier eine kurze Zusammenfassung.

Die Implementierung der Funktion „Web Share Target“ umfasst zwei Teile. Aktualisieren Sie zuerst Ihr Web-App-Manifest, um anzugeben, dass Ihre App nach der Installation als Freigabe-Ziel verwendet werden soll. Im folgenden Beispiel werden Freigaben über eine POST-Anfrage an die /share-URL weitergeleitet. Sie wird als Multipart-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-Freigabeziele mit Workbox

Normalerweise wird dies von einem Serverendpunkt übernommen. Ein praktischer Trick für ein Freigabeziel ist jedoch, eine Route direkt in Ihrem Service Worker zu registrieren, um die Anfrage zu verarbeiten. Dadurch kann Ihre App ohne Backend als Ziel für das Teilen verwendet werden.

Dazu registrieren Sie in Workbox eine Route, die von Ihrem Service Worker verarbeitet wird. Importieren Sie zuerst registerRoute aus 'workbox-routing'. Sie ist für den /share-Pfad registriert, der auch im Beispiel-Web-App-Manifest aufgeführt ist. Als Reaktion darauf wird shareTargetHandler() aufgerufen.

import { registerRoute } from 'workbox-routing';

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

Die Funktion shareTargetHandler() ist asynchron und nimmt das Ereignis entgegen, wartet auf die Formulardaten und ruft dann die Media-Dateien 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 tun, was Sie möchten. Sie können sie im Cache speichern. Sie können sie mit einer Fetch-Anfrage an einen anderen Ort 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 Zeiger auf die Medien in der Cache Storage API oder IndexedDB speichern.

Sie können die Funktion in der Beispiel-App Fugu Journal ausprobieren und sich die Service Worker-Implementierung im Quellcode ansehen.

Eine gängige Vorgehensweise ist, freigegebene Ressourcen zurückzuhalten, bis eine bessere Netzwerkverbindung verfügbar ist. 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 zu integrieren. So wird sie bei der wichtigen Aufgabe des Teilens von Inhalten zwischen Apps mit plattformspezifischen Anwendungen gleichgestellt. Dazu ist jedoch in der Regel ein Server erforderlich, der die Anfrage empfangen kann. Wenn Sie Workbox verwenden, um direkt in Ihrem Service Worker eine Share Target-Route zu erstellen, unterliegt Ihre App dieser Einschränkung nicht. So kann Share Target auch offline und ohne Back-Ends für Apps verwendet werden.

Foto von Elaine Casap auf Unsplash