Mit Workbox PWAs in integrierte Freigabe-UIs einbinden

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

Jeff Posnick

Joe Medley

Sam Richard

Mit der Web Share Target API kannst du deine Progressive Web-App nach der Installation in einem Share-Sheet auf Systemebene eines Nutzers anzeigen. Das funktioniert zwar hervorragend, wenn Sie einen Server für den Empfang der Anfrage haben, aber es ist viel schwieriger, ohne zu arbeiten.

In diesem Artikel verwenden wir Workbox, eine Reihe von JavaScript-Bibliotheken zum Hinzufügen von Offlinesupport zu Webanwendungen, um eine Freigabe-Ziel-URL zu erstellen, die vollständig in Ihrem Service Worker gespeichert ist. So können statische Websites und Anwendungen mit nur einer Seite als gemeinsame Ziele ohne dedizierten Serverendpunkt verwendet werden.

Auswahl für Freigabeziele 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 Empfang freigegebener Daten mit der Web Share Target API eine ausführliche Einführung. Hier ist ein kurzer Rückblick.

Die Implementierung der Funktion „Web Share-Ziel“ erfolgt in zwei Teile. Aktualisieren Sie zuerst das Web-App-Manifest, um anzugeben, dass die App bei der Installation ein Freigabeziel sein soll. Im folgenden Beispiel werden Freigaben über eine POST-Anfrage an die URL /share weitergeleitet. Es ist als mehrteiliges Formular codiert, wobei der Titel name, der Text description und JPEG-Bilder photos genannt wird.

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

Service Worker geben Ziele für Workbox frei

Normalerweise wird dies von einem Serverendpunkt verarbeitet. Ein einfacher Trick, den Sie für ein gemeinsames Ziel tun können, besteht jedoch darin, eine Route direkt in Ihrem Service Worker zu registrieren, um die Anfrage zu verarbeiten. Dadurch wird Ihre App zu einem Freigabeziel ohne Back-End.

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 die /share-Route registriert, die auch im Manifest der Beispiel-Web-App aufgeführt ist. Als Antwort wird shareTargetHandler() aufgerufen.

import { registerRoute } from 'workbox-routing';

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

Die Funktion shareTargetHandler() ist asynchron und übernimmt das Ereignis, wartet auf die Formulardaten und ruft dann die Mediendateien von dort 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
};

Sie können dann mit diesen Dateien tun, was Sie möchten. Sie können sie im Cache speichern. Sie können sie mit einer Abrufanfrage irgendwohin senden. Sie können sogar die anderen Manifestoptionen verwenden und z. B. eine Seite mit 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 den Dienst in der Beispiel-App Fugu Journal ausprobieren und sich die Service Worker-Implementierung im Quellcode ansehen.

Oft werden gemeinsam genutzte Ressourcen zurückgehalten, bis bessere Netzwerkverbindungen verfügbar sind. Die Workbox unterstützt auch die regelmäßige Hintergrundsynchronisierung.

Fazit

Die Share Target API ist eine einfache Möglichkeit, Ihre progressive Web-App umfassend in die Geräte der Nutzer zu integrieren und sie mit plattformspezifischen Anwendungen für die wichtige Aufgabe des Teilens von Inhalten zwischen Apps zu vergleichen. Dazu ist in der Regel jedoch ein Server erforderlich, der die Anfrage empfangen kann. Wenn Sie Workbox verwenden, um eine freigegebene Zielroute direkt in Ihrem Service Worker zu erstellen, ist Ihre Anwendung von dieser Einschränkung befreit, sodass Share Target offline und ohne Back-Ends für Anwendungen verwendet werden kann.

Foto von Elaine Casap bei Unsplash