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.
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