share_target

Werte

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 Ziel der Webfreigabe.

enctype Optional

Die Codierung der freigegebenen Daten, wenn eine POST-Anfrage verwendet wird. Wird bei GET-Anfragen ignoriert.

method Optional

Die HTTP-Anfragemethode, die verwendet werden soll. Entweder GET oder POST. Verwenden Sie POST, wenn die freigegebenen Daten Binärdaten wie Bild(er) enthalten oder wenn sie die Ziel-App ändern, zum Beispiel, wenn ein Datenpunkt wie ein Lesezeichen erstellt wird.

params

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

• title Optional: Name des Abfrageparameters, der für den Titel des freigegebenen Dokuments verwendet wird.
• text Optional: Name des Abfrageparameters für den Text (oder den 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 Ziel akzeptiert werden. Das Objekt erfordert die folgenden Eigenschaften:
  • name: Name des Formularfelds, das zum Teilen von Dateien verwendet wird.
  • accept: Ein String (oder ein Array von Strings) von akzeptierten MIME-Typen oder Dateierweiterungen.

Beispiele

Empfangen von Freigabedaten mit GET

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 Teilen-Dialog des Systems auswählt, wird Ihre PWA gestartet, und eine GET HTTP-Anfrage wird an die angegebene URL mit den angegebenen Abfrageparametern gesendet. Es wird so aussehen: /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 die freigegebenen Daten in Ihrer Anwendung zu verarbeiten.

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

Empfangen von Freigabedaten mit POST

Wenn die Freigabeanforderung eine oder mehrere Dateien umfasst oder in Ihrer Anwendung eine Nebenwirkung verursacht, sollte die HTTP POST-Methode verwendet werden. Beispielsweise, wenn Ihre Anwendung Bilder zur weiteren Verarbeitung empfängt oder einen freigegebenen Link in Ihrer Datenbank als Lesezeichen 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 Ihnen erlaubt, die Daten in einem Service Worker zuzugreifen.

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 z.B. ein Seiten-Refresh vom Benutzer initiiert wurde.

Empfangen von freigegebenen Dateien

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 akzeptierte MIME-Typen oder Dateierweiterungen angeben. Es ist wahrscheinlich eine gute Idee, beide zu definieren, da Betriebssysteme unterschiedliche Vorlieben haben könnten.

{
  "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 von der Service Worker-Kontext zu den Client-Kontexten zu bringen, ist eine Lösung, die Dateien temporär im Cache oder IndexedDB zu speichern und dann ihre Clients mit Client.postMessage() zu benachrichtigen.

Sicherheit & Datenschutz

Ihre PWA kann nur als Webfreigabe-Ziel fungieren, wenn sie installiert wurde. Siehe auch Wie man PWAs installierbar macht.

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

Spezifikationen

Browser-Kompatibilität