share_target

Der Wert des share_target Mitglieds ist ein Objekt, das definiert, wie eine Anwendung freigegebene Daten empfangen kann. Dieses Objekt kann folgende 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äre Daten wie Bild(er) enthalten oder wenn sie die Ziel-App ändern, z. B. wenn sie einen Datenpunkt wie ein Lesezeichen erstellen.

params

Ein Objekt zur Konfiguration der Freigabeparameter. Die Schlüssel des Objekts entsprechen dem data Objekt in navigator.share(). Die Werte des Objekts 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 Körper) der freigegebenen Nachricht.
• url Optional: Name des Abfrageparameters für die URL der 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 für die Freigabe von Dateien verwendet wird.
  • accept: Ein String (oder ein Array von Strings) der akzeptierten MIME-Typen oder Dateierweiterungen.

Ein Freigabeziel kann mit dem folgenden share_target Manifestmitglied 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 wird an die angegebene URL gesendet, einschließlich der spezifizierten Abfrageparameter. Es sieht dann so aus: /shared-content-receiver/?name=a+shared+name&description=a+shared+description&link=https%3A%2F%2Fexample.com%2F.

Die URLSearchParams Schnittstelle kann nützlich sein, um mit den in Ihrer Anwendung geteilten Daten umzugehen und etwas damit zu machen.

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 einen Seiteneffekt in Ihrer Anwendung verursacht, sollte die HTTP POST Methode verwendet werden. Zum Beispiel, wenn Ihre Anwendung Bilder für die weitere 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 entweder serverseitigen Code verwenden, um die POST Freigabedaten zu verarbeiten, oder ein fetch Ereignislistener kann verwendet werden, um die HTTP-Anfrage abzufangen, was den Zugriff auf die Daten in einem Service Worker ermöglicht und eine bessere Erfahrung für Offline-Nutzer bietet.

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 303 See Other Redirect beantwortet werden, um zu vermeiden, dass mehrere POST Anfragen gesendet werden, wenn beispielsweise ein Seitenneuladen durch den Benutzer initiiert wurde.

Um freigegebene Dateien zu akzeptieren, muss die HTTP-Methode POST sein, die 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 Dateierweiterungen angeben. Es ist wahrscheinlich eine gute Idee, beide zu definieren, da Betriebssysteme sich darin unterscheiden können, welches 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 mit freigegebenen Datei-Daten umzugehen, siehe das POST Beispiel oben und die FileReader API, um die Dateien zu lesen. Um die Dateien vom Service Worker-Kontext zu den Client-Kontexten zu bekommen, ist es eine Möglichkeit, die Dateien vorübergehend im Cache oder IndexedDB zu speichern und dann seine Clients mit Client.postMessage() zu benachrichtigen.

Ihre PWA kann nur als Web-Freigabeziel fungieren, wenn sie installiert ist. Siehe auch Anleitung zum Installieren von PWAs.

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