Mit Workbox PWAs in integrierte Freigabe-UIs einbinden

So legen Sie fest, dass Ihre PWA neben plattformspezifischen Apps in Freigabe-UIs auf Systemebene angezeigt wird

Mit der Web Share Target API können Sie Ihre progressive Web-App in einem nach der Installation das Share-Sheet des Nutzers auf Systemebene. Es funktioniert zwar großartig, wenn Sie einen Server haben, nicht verfügbar ist, ist es wesentlich schwieriger, mit der Arbeit zu beginnen.

In diesem Artikel verwenden wir Workbox, ein Satz von JavaScript Bibliotheken zum Hinzufügen von Offlineunterstützung zu Web-Apps, zum Erstellen einer gemeinsamen Ziel-URL die vollständig in Ihrem Service Worker enthalten sind. So können statische Websites und Single-Page-Anwendungen dienen als Freigabeziele ohne dedizierten Serverendpunkt.

<ph type="x-smartling-placeholder">
</ph> Android-Smartphone mit der Funktion &quot;Teilen über&quot; Leiste geöffnet. <ph type="x-smartling-placeholder">
</ph> Freigabezielauswahl auf Systemebene mit einer installierten PWA namens Share Target Test als Option.

Auf derselben Seite

Falls Sie mit der Funktionsweise von Web Share Target nicht vertraut sind: Empfang freigegebener Daten über Web Share Die Ziel-API gibt Ihnen eine detaillierte Einführung. Hier ist ein kurzer Rückblick.

Die Implementierung der Web Share Target-Funktion besteht aus zwei Teilen. Erstens: Aktualisieren Sie Ihr Web-App-Manifest, um anzugeben, dass Ihre App per Freigabe als Ziel festgelegt. Im folgenden Beispiel werden geteilte Inhalte an die URL /share weitergeleitet mit einer POST-Anfrage. Es ist als mehrteiliges Formular codiert, wobei Titel aufgerufen wird. name, Text description und JPEG-Bilder photos.


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

Freigabeziele für Service Worker mit Workbox

Normalerweise über einen Serverendpunkt, ein praktischer Trick, den Sie für eine Freigabe durchführen können, eine Route direkt in Ihrem Service Worker zu registrieren, Dadurch kann Ihre App ein Freigabeziel ohne Back-End sein.

Sie tun dies in Workbox, indem Sie und eine Route registrieren, die von Ihrem Service Worker verarbeitet wird. Mit dem Import beginnen registerRoute von 'workbox-routing'. Wie Sie sehen, ist es für die /share-Route, dieselbe, die im Beispielmanifest für die Web-App aufgeführt ist. In antwortet er shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

Die Funktion shareTargetHandler() ist asynchron und nimmt das Ereignis an. die Formulardaten und ruft dann die Mediendateien davon 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 beliebig arbeiten. Sie können sie im Cache speichern. Ich mit einer Abrufanfrage weiterleiten können. Sie können sogar die anderen z. B. eine Seite mit Suchparametern freigegebene Elemente oder das Speichern der Daten und Verweise auf die Medien im Cache-Speicher API oder IndexedDB.

Sie können es in der Beispiel-App Fugu ausprobieren. Journal erstellen und Service Worker ansehen Implementierung in der Quelle Code.

Oft werden Ressourcen so lange zurückgehalten, bis ein besseres Netzwerk Verbindungen verfügbar. Workbox unterstützt auch regelmäßige Hintergründe synchronisieren.

Fazit

Die Share Target API bietet eine einfache Möglichkeit zur umfassenden Integration Ihres progressiven Webs App in die Geräte der Nutzer einbauen und sie mit plattformspezifischen Anwendungen für die Inhalte zwischen Apps zu teilen. Dafür ist jedoch in der Regel ein für den Empfang der Anfrage verfügbar ist. Mit Workbox eine Freigabe erstellen Zielroute direkt in Ihrem Service Worker ausführen, ist dies in Ihrer App nicht möglich. eingeschränkt, sodass die Funktion „Ziel teilen“ auch offline und ohne Back-Ends.

Foto von Elaine Casap auf Unsplash