share_target

Der Wert des Members share_target ist ein Objekt, das definiert, wie eine Anwendung freigegebene Daten empfangen kann. Dieses Objekt kann die folgenden Eigenschaften enthalten (action und params sind erforderlich):

action

Die URL für das Web Share Target.

enctype Optional

Die Kodierung der freigegebenen Daten, wenn eine POST-Anfrage verwendet wird. Bei GET-Anfragen wird dies ignoriert.

method Optional

Die zu verwendende HTTP-Anfragemethode. Entweder GET oder POST. Verwenden Sie POST, wenn die freigegebenen Daten binäre Daten wie Bild(er) enthalten oder wenn sie die Ziel-App ändern, z. B. wenn ein Datenpunkt wie ein Lesezeichen erstellt wird.

params

Ein Objekt zur Konfiguration der Freigabeparameter. Die Objektschlüssel entsprechen dem data-Objekt in navigator.share(). Die Objektwerte können angegeben werden und werden als Abfrageparameter verwendet:

• title Optional: Name des Abfrageparameters für den Titel des freigegebenen Dokuments.
• text Optional: Name des Abfrageparameters für den Text (oder Körper) der freigegebenen Nachricht.
• url Optional: Name des Abfrageparameters für die URL zur freigegebenen Ressource.
• files Optional: Ein Objekt (oder ein Array von Objekten), das definiert, welche Dateien vom Freigabeziel akzeptiert werden. Das Objekt erfordert die folgenden Eigenschaften:
  • name: Name des Formularfelds, das zum Freigeben von Dateien verwendet wird.
  • accept: Ein String (oder ein Array von Strings) von akzeptierten MIME-Typen oder Dateiendungen.

Ein Freigabeziel kann mithilfe des folgenden share_target-Manifest-Mitglieds registriert werden:

{
  "share_target": {
    "action": "/shared-content-receiver/",
    "method": "GET",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link"
    }
  }
}

Wenn ein Benutzer Ihre App im Freigabedialog des Systems auswählt, wird Ihre PWA gestartet und eine GET-HTTP-Anfrage an die angegebene URL mit den angegebenen Abfrageparametern gesendet. Dies sieht folgendermaßen aus: /shared-content-receiver/?name=a+shared+name&description=a+shared+description&link=https%3A%2F%2Fexample.com%2F.

Das URLSearchParams-Interface kann nützlich sein, um die freigegebenen Daten in Ihrer Anwendung zu verarbeiten und etwas damit zu tun.

const sharedName = url.searchParams.get("name");
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");

Wenn die Freigabeanfrage eine oder mehrere Dateien enthält oder eine Seiteneffekt in Ihrer Anwendung verursacht, sollte die HTTP-POST-Methode verwendet werden. Zum Beispiel, wenn Ihre Anwendung Bilder zur weiteren Verarbeitung empfängt oder einen freigegebenen Link als Lesezeichen in Ihrer Datenbank speichern möchte.

{
  "share_target": {
    "action": "/save-bookmark/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

Sie können entweder POST-Freigabedaten mit serverseitigem Code verarbeiten oder, um eine bessere Erfahrung für Offline-Benutzer zu bieten, einen fetch-Event-Listener verwenden, um die HTTP-Anfrage abzufangen, was den Zugriff auf die Daten in einem Service Worker ermöglicht.

self.addEventListener("fetch", (event) => {
  // Regular requests not related to Web Share Target.
  if (event.request.method !== "POST") {
    event.respondWith(fetch(event.request));
    return;
  }

  // Requests related to Web Share Target.
  event.respondWith(
    (async () => {
      const formData = await event.request.formData();
      const link = formData.get("link") || "";
      // Instead of the original URL `/save-bookmark/`, redirect
      // the user to a URL returned by the `saveBookmark()`
      // function, for example, `/`.
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })(),
  );
});

Die POST-Anfrage wird dann idealerweise mit einer HTTP-303 See Other-Weiterleitung beantwortet, um zu vermeiden, dass mehrere POST-Anfragen gesendet werden, wenn beispielsweise ein Seiten-Refresh vom Benutzer initiiert wurde.

Um freigegebene Dateien zu akzeptieren, muss die HTTP-Methode POST sein, der enctype muss multipart/form-data sein, und ein files-Eintrag, der die akzeptierten Dateitypen definiert, muss bereitgestellt werden.

Dateien müssen eine name-Eigenschaft haben, und die accept-Eigenschaft muss die akzeptierten MIME-Typen oder Dateiendungen angeben. Es ist wahrscheinlich eine gute Idee, beides zu definieren, da Betriebssysteme möglicherweise darin variieren, welche sie bevorzugen.

{
  "share_target": {
    "action": "/file-collector",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "lists",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "photos",
          "accept": ["image/svg+xml", ".svg"]
        }
      ]
    }
  }
}

Um freigegebene Dateidaten zu verarbeiten, siehe das POST-Beispiel oben und die FileReader-API, um die Dateien zu lesen. Um die Dateien aus dem Service Worker-Kontext in die Client-Kontexte zu übertragen, ist eine Lösung, die Dateien vorübergehend in das Cache oder IndexedDB zu schreiben und dann ihre Clients mit Client.postMessage() zu benachrichtigen.

Ihre PWA kann nur dann als Web Share Target agieren, wenn sie installiert ist. Siehe auch Anleitung zur Installation von PWAs.

Ähnlich wie bei HTML-Formularübermittlungen sollten Sie vorsichtig mit den Daten sein, die über das Freigabeziel an Ihre Anwendung gesendet werden. Stellen Sie sicher, dass Sie eingehende Daten validieren, bevor Sie sie verwenden.