Freigeben über

Integrieren Sie Progressive Web-Apps mit Windows Share

  • Artikel

Dieser Artikel erklärt, wie man eine Progressive Web-App (PWA) mit der Windows Share-Funktion integriert. Mit dieser Funktion können Benutzer Inhalte von einer Windows-Anwendung für eine andere freigeben. Die PWA registriert sich als Share Target, um freigegebene Dateien innerhalb der App zu empfangen und zu verarbeiten.

Was ist Share Target?

Share Target ist eine Funktion, die in Windows 8 eingeführt wurde und es einer Anwendung ermöglicht, Daten von einer anderen Anwendung zu empfangen. Share Target funktioniert wie eine Zwischenablage, jedoch mit dynamischen Inhalten.

Inhalte von Ihrer PWA aus freigeben

Um Inhalte freizugeben, generiert eine PWA Inhalte (z. B. Text, Links oder Dateien) und übergibt die freigegebenen Inhalte an das Betriebssystem. Das Betriebssystem überlässt dem Nutzer die Entscheidung, welche App er für den Empfang dieser Inhalte nutzen möchte. PWAs können die Web Share API verwenden, um die Anzeige des Share Sheet in Windows auszulösen. Die Web Share API wird in Microsoft Edge und anderen Chromium-basierten Browsern unterstützt.

Unter Freigabe von Inhalten in der Microsoft Edge-Dokumentation finden Sie ein vollständiges Beispiel für die Freigabe von Inhalten über eine PWA.

Empfangen Sie freigegebene Dateien in Ihrer PWA

Um Inhalte zu erhalten, fungiert eine PWA als Inhaltsziel. Der PWA muss beim Betriebssystem als Ziel für die gemeinsame Nutzung von Inhalten registriert sein.

Das Mitglied share_target muss die notwendigen Informationen enthalten, damit das System den freigegebenen Inhalt an Ihre Anwendung weitergeben kann. Betrachten Sie die folgende Beispielkonfiguration des Manifests 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-Anfrage wird an die in der Eigenschaft action angegebene URL gestellt. Die gemeinsamen Daten werden als Abfrageparameter title, text und url übergeben. Es wird der folgende Antrag gestellt: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Das folgende Beispiel veranschaulicht, wie der Scoped Service Worker registriert wird:

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

Der Service Worker verarbeitet die Freigabedaten wie gewünscht und erfüllt dann entweder die Anforderung oder er kann die Anforderung aus dem benutzerdefinierten Pfad zurückleiten. Das folgende Beispiel veranschaulicht, wie die Anfrage aus dem benutzerdefinierten Pfad zurückgeleitet werden kann:

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 in der Microsoft Edge-Dokumentation unter dem Beispiel Empfangen von freigegebenen Inhalten.

Überlegungen zur Leistung

Wenn der Fetch-Handler nur zur Unterstützung der Freigabe hinzugefügt wird, kann es zu Latenzproblemen kommen, da die Anfragen durch den Service Worker unterbrochen werden. Um dieses Problem zu lösen, sollten Sie share_target als Pseudo-Unterpfad festlegen und einen Service Worker registrieren, der speziell auf diesen Pfad ausgerichtet ist. Dieser Ansatz ermöglicht die Verwendung eines Fetch-Handlers für das Freigabeziel, ohne denselben Fetch-Handler für andere Aufrufe zu registrieren.

Beispiel einer PWA-Anwendung

Die PWA Logo-Drucker-Beispielanwendung auf GitHub zeigt, wie eine PWA mit dem Windows Share Sheet integriert werden kann. Die App ermöglicht es den Benutzern, das PWA-Logo auf einem Drucker auszudrucken. Die Anwendung verwendet das Windows Share Sheet, um das Logo mit anderen Anwendungen zu teilen.

Weitere Informationen