Freigeben über

Integrieren Sie Progressive Web Apps mit Windows-Freigabe

In diesem Artikel wird erläutert, wie Sie eine Progressive Web App (PWA) in das Windows Share-Feature integrieren. Mit diesem Feature können Benutzer Inhalte von einer Windows-App an eine andere freigeben. Die PWA registriert sich als Freigabeziel, um Dateien innerhalb der App zu empfangen und zu verarbeiten.

Was ist die "Share Target"-Funktion?

"Share Target ist ein Feature, das in Windows 8 eingeführt wurde und es einer App erlaubt, Daten von einer anderen App zu empfangen." Zielfreigabe funktioniert wie eine Zwischenablage, jedoch mit dynamischen Inhalten.

Freigeben von Inhalten aus Ihrer PWA

Um Inhalte freizugeben, generiert eine PWA Inhalte (z. B. Text, Links oder Dateien) und übergibt die freigegebenen Inhalte an das Betriebssystem. Mit dem Betriebssystem kann der Benutzer entscheiden, welche App verwendet werden soll, um diese Inhalte zu empfangen. PWAs können die Webfreigabe-API verwenden, um die Anzeige des Freigabeblatts in Windows auszulösen. Die Web Share API wird in Microsoft Edge und anderen Chromium-basierten Browsern unterstützt.

Ein vollständiges Beispiel zum Freigeben von Inhalten aus einer PWA finden Sie in der Microsoft Edge-Dokumentation.

Empfangen freigegebener Dateien in Ihrer PWA

Zum Empfangen von Inhalten fungiert eine PWA als Inhaltsziel. Die PWA muss beim Betriebssystem als Ziel zur Inhaltsteilung registriert werden.

Das share_target Element muss die erforderlichen Informationen enthalten, damit das System die freigegebenen Inhalte an Ihre App übermittelt. Betrachten Sie die folgende Beispielmanifestkonfiguration share_target :

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Wenn Ihre App vom Benutzer als Ziel für freigegebene Inhalte ausgewählt wird, wird die PWA gestartet. Eine GET HTTP-Anforderung wird an die durch die action Eigenschaft angegebene URL gesendet. Die freigegebenen Daten werden als title, text, und url Abfrageparameter übermittelt. Die folgende Anforderung wird gestellt: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Im folgenden Beispiel wird veranschaulicht, wie der bereichsbezogene Service Worker registriert wird:

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

Der Service-Worker verarbeitet die Freigabedaten nach Bedarf und erfüllt dann entweder die Anforderung, oder er kann die Anforderung wieder aus dem benutzerdefinierten Pfad umleiten. Das folgende Beispiel veranschaulicht, wie die Anforderung wieder aus dem benutzerdefinierten Pfad umgeleitet wird:

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Weitere Informationen finden Sie im Beispiel zum Empfangen freigegebener Inhalte in der Microsoft Edge-Dokumentation.

Leistungsüberlegungen

Wenn der Abrufhandler ausschließlich zur Unterstützung für die gemeinsame Nutzung hinzugefügt wird, können mögliche Latenzprobleme auftreten, da die Anforderungen vom Service Worker gestört werden. Um dieses Problem zu beheben, sollten Sie den share_target Pseudo-Unterpfad festlegen und einen Service Worker registrieren, der speziell auf diesen Pfad ausgelegt ist. Dieser Ansatz ermöglicht die Verwendung eines Abrufhandlers für das Freigabeziel, ohne den gleichen Abrufhandler für andere Aufrufe zu registrieren.

Beispiel-PWA-App

Die PWA-Logo-Druckerbeispiel-App auf GitHub veranschaulicht die Integration einer PWA in das Windows Share Sheet. Mit der App können Benutzer das PWA-Logo auf einen Drucker drucken. Die App verwendet das Windows Share Sheet, um das Logo mit anderen Apps zu teilen.

Siehe auch