So zeigen Sie Ihre PWA neben nativen Apps in Freigabe-Benutzeroberflächen auf Systemebene an
Mit der Web Share Destination API können Sie Ihre anzeigen Progressive Web-App auf der nativen Freigabe eines Benutzers Bettdecke nachdem es installiert wurde. Es funktioniert zwar hervorragend, wenn Sie einen Server zum Empfangen der Anfrage zur Verfügung haben, es ist jedoch viel schwieriger, zur Sache zu kommen, wenn Sie dies nicht tun.
In diesem Artikel werden wir verwenden
Arbeitsbox, eine Reihe von JavaScript-Bibliotheken zum Hinzufügen von Offline-Unterstützung zu Webanwendungen, um eine gemeinsam genutzte Ziel-URL zu erstellen, die sich vollständig in Ihrem Service Worker befindet. Auf diese Weise können statische Sites und Anwendungen mit nur einer Seite als Ziele für die Freigabe ohne einen dedizierten Serverendpunkt dienen.
Gemeinsame Zielauswahl auf Systemebene mit einer installierten PWA mit dem Namen
Zieltest teilen als eine Option.
Auf derselben Seite
Wenn Sie mit der Funktionsweise von Web Share Target nicht vertraut sind, erhalten Sie eine ausführliche Einführung, indem Sie gemeinsam genutzte Daten mit der Web Share Target-API empfangen. Hier ist eine kurze Übersicht.
Die Implementierung der Webfreigabe-Zielfunktion besteht aus zwei Teilen. Aktualisieren Sie zunächst Ihr Webanwendungsmanifest, um anzugeben, dass Ihre Anwendung bei der Installation ein freigegebenes Ziel sein soll. Das folgende Beispiel leitet Aktionen an / Compartir URL über POST Anfrage. Es ist als mehrteiliges Formular codiert und der Titel heißt
Süßkartoffel, Text genannt Beschreibungund JPEG-Bilder werden aufgerufen Fotos.
...
"share_target" : {
"action" : "/ share" ,
"Methode" : "POST" ,
"enctype" : "multipart / form-data" ,
"params" : {
"title" : "name" ,
"text" : "description" ,
"Dateien" : [
{
"Name" : "Fotos" ,
"accept" : [ "image / jpeg" , ".jpg" ]
}}
]]
}}
}}
...Der Servicemitarbeiter teilt die Ziele mit der Workbox
Obwohl dies normalerweise von einem Serverendpunkt verarbeitet wird, besteht ein guter Trick für ein freigegebenes Ziel darin, eine Route direkt bei Ihrem Servicemitarbeiter zu registrieren, um die Anforderung zu bearbeiten. Auf diese Weise kann Ihre Anwendung als Ziel für die Freigabe ohne Backend verwendet werden.
Du machst das in Arbeitsbox Protokollieren einer von Ihrem Servicemitarbeiter gefahrenen Route. Beginnen Sie mit dem Importieren
registerRoute von 'Workbox-Routing'. Bitte beachten Sie, dass Sie bei registriert sind
/ Compartir route, dieselbe, die im Manifest für die Beispielwebanwendung angezeigt wird. Als Antwort rufen Sie an shareTargetHandler ().
{ registerRoute } aus 'Workbox-Routing' importieren ; registerRoute (
'/ share' ,
shareTargetHandler ,
'POST'
) ;
das shareTargetHandler () Die Funktion ist asynchron und nimmt das Ereignis auf, wartet auf die Formulardaten und ruft dann die Mediendateien daraus ab.
asynchrone Funktion shareTargetHandler ( { event } ) {
const formData = Ereignis abwarten . Anfrage . formData ( ) ;
const mediaFiles = formData . getAll ( 'media' ) ; für ( const mediaFile von mediaFiles ) {
} ) ;
} ;
Mit diesen Dateien können Sie dann tun, was Sie wollen. Sie können sie zwischenspeichern. Sie können sie mit einer Wiederherstellungsanforderung irgendwohin senden. Sie können sogar 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 im Internet speichern Caching-API
oder IndexedDB.
Sie können es in der Beispiel-App versuchen Fugus Tagebuch und zeigen Sie die Implementierung Ihres Servicemitarbeiters in Ihrem an Quellcode.
Sie können häufig gemeinsam genutzte Ressourcen behalten, bis bessere Netzwerkverbindungen verfügbar sind. Workbox unterstützt auch die regelmäßige Synchronisation im Hintergrund.
Fazit
Die Share Target-API ist eine einfache Möglichkeit, Ihre progressive Webanwendung tief in Benutzergeräte zu integrieren und sie mit nativen Anwendungen für die wichtige Aufgabe des Austauschs von Inhalten zwischen Anwendungen gleichzusetzen. Dies erfordert jedoch normalerweise einen Server, der verfügbar ist, um die Anforderung zu empfangen. Durch die Nutzung von Workbox zum Erstellen eines freigegebenen Zielpfads direkt in Ihrem Service Worker ist Ihre Anwendung von dieser Einschränkung befreit, sodass Share Target für Offline- und Backend-freie Anwendungen verwendet werden kann.
Foto von Elaine Casap im Unsplash
