share_target

Der Wert des share_target Mitglieds 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 Freigabedaten, wenn eine POST Anfrage verwendet wird. Wird bei GET Anfragen ignoriert.

method Optional

Die zu verwendende HTTP-Anfragemethode. Entweder GET oder POST. Verwenden Sie POST, wenn die freigegebenen Daten Binärdaten wie Bild(er) enthalten oder wenn es die Ziel-App verändert, zum Beispiel, wenn es einen Datenpunkt wie ein Lesezeichen erstellt.

params

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

• title Optional: Name des Abfrageparameters zur Verwendung für den Titel des freigegebenen Dokuments.
• text Optional: Name des Abfrageparameters für den Text (oder Inhalt) 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 Formularfeldes, das zum Teilen von Dateien verwendet wird.
  • accept: Ein String (oder ein Array von Strings) von akzeptierten MIME-Typen oder Dateiendungen.

Ein Freigabeziel kann mit dem folgenden share_target Manifest-Mitglied 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 bereitgestellte URL mit den angegebenen Abfrageparametern gesendet. Es wird folgendermaßen aussehen: /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 Freigabeanforderung eine oder mehrere Dateien enthält oder einen Seiteneffekt in Ihrer Anwendung verursacht, sollte die HTTP-POST-Methode verwendet werden. Zum Beispiel, wenn Ihre Anwendung Bilder zur weiteren Verarbeitung erhält 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 POST Freigabedaten entweder mit serverseitigem Code verarbeiten oder, um ein besseres Erlebnis für Offline-Nutzer zu bieten, kann ein fetch-Ereignis-Listener verwendet werden, 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 sollte idealerweise mit einem HTTP-Redirect 303 See Other beantwortet werden, um zu vermeiden, dass mehrere POST-Anfragen eingereicht werden, falls der Benutzer zum Beispiel eine Seitenaktualisierung initiiert hat.

Um freigegebene Dateien zu akzeptieren, muss die HTTP-Methode POST sein, das 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 akzeptierte MIME-Typen oder Dateiendungen spezifizieren. Es ist wahrscheinlich eine gute Idee, beide zu definieren, da sich Betriebssysteme darin unterscheiden können, 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 obige POST-Beispiel und die FileReader API, um die Dateien zu lesen. Um die Dateien vom Service Worker Kontext in Client-Kontexte zu bringen, ist eine Möglichkeit, die Dateien vorübergehend in den Cache oder IndexedDB zu schreiben und dann seine Clients mit Client.postMessage() zu benachrichtigen.

Ihre PWA kann nur als ein Web Share Target agieren, wenn sie installiert wurde. Siehe auch Anleitung, wie man PWAs installierbar macht.

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