Freigegebene Daten mit der Web Share Target API empfangen

Die Web Share Target API vereinfacht die Freigabe auf Mobilgeräten und Computern

Auf einem Mobilgerät oder Computer sollte das Teilen so einfach sein wie das Klicken auf die Schaltfläche Teilen, die Auswahl einer App und die Auswahl der Personen, mit denen Sie die Inhalte teilen möchten. Sie können beispielsweise einen interessanten Artikel teilen, indem Sie ihn per E-Mail an Freunde senden oder in den sozialen Medien posten.

Bisher konnten sich nur platformspezifische Apps beim Betriebssystem registrieren, um Freigaben von anderen installierten Apps zu erhalten. Mit der Web Share Target API können installierte Web-Apps sich beim zugrunde liegenden Betriebssystem als Freigabeziel registrieren, um freigegebene Inhalte zu empfangen.

Ein Android-Smartphone, auf dem die Leiste „Über“ geöffnet ist.
Auswahl des Freigabeziels auf Systemebene mit einer installierten PWA als Option.

Web Share Target in Aktion

  1. Öffnen Sie die Demo für das Webfreigabeziel mit Chrome 76 oder höher für Android oder Chrome 89 oder höher auf dem Computer.
  2. Klicken Sie auf Installieren, um die App zum Startbildschirm hinzuzufügen, oder verwenden Sie das Chrome-Menü, um sie hinzuzufügen.
  3. Öffnen Sie eine App, die das Teilen unterstützt, oder verwenden Sie die Schaltfläche „Teilen“ in der Demo-App.
  4. Wähle in der Zielauswahl Web Share Test aus.

Nach der Freigabe sollten alle freigegebenen Informationen in der Ziel-Web-App der Web-Freigabe angezeigt werden.

App als Freigabeziel registrieren

Damit Ihre App als Freigabeziel registriert werden kann, muss sie die Kriterien für die Installationsfähigkeit in Chrome erfüllen. Außerdem muss ein Nutzer Ihre App auf seinem Startbildschirm hinzufügen, bevor er Inhalte über sie teilen kann. Dadurch wird verhindert, dass sich Websites willkürlich zur Funktion zum Teilen von Intents des Nutzers hinzufügen. Außerdem wird sichergestellt, dass die Freigabe etwas ist, das der Nutzer mit Ihrer App tun möchte.

Manifest der Webanwendung aktualisieren

Wenn Sie Ihre App als Freigabeziel registrieren möchten, fügen Sie dem Manifest der Webanwendung einen Eintrag vom Typ share_target hinzu. Dadurch wird dem Betriebssystem mitgeteilt, Ihre App als Option in die Intent-Auswahl aufzunehmen. Mit den Angaben im Manifest legen Sie fest, welche Daten Ihre App akzeptiert. Es gibt drei gängige Szenarien für den Eintrag share_target:

  • Grundlegende Informationen werden akzeptiert
  • Anwendungsänderungen akzeptieren
  • Dateien akzeptieren

Allgemeine Informationen akzeptieren

Wenn die Ziel-App nur grundlegende Informationen wie Daten, Links und Text akzeptiert, fügen Sie der manifest.json-Datei Folgendes hinzu:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

Wenn Ihre Anwendung bereits ein Freigabe-URL-Schema hat, können Sie die params-Werte durch Ihre vorhandenen Abfrageparameter ersetzen. Wenn Ihr URL-Freigabeschema beispielsweise body anstelle von text verwendet, können Sie "text": "text" durch "text": "body" ersetzen.

Der Wert method wird standardmäßig auf "GET" gesetzt, wenn nicht angegeben. Das Feld enctype, das in diesem Beispiel nicht zu sehen ist, gibt den Codierungstyp für die Daten an. Bei der "GET"-Methode ist enctype standardmäßig auf "application/x-www-form-urlencoded" gesetzt und wird ignoriert, wenn ein anderer Wert festgelegt ist.

Anwendungsänderungen werden akzeptiert

Wenn die freigegebenen Daten die Ziel-App in irgendeiner Weise ändern, z. B. durch Speichern eines Lesezeichens in der Zielanwendung, legen Sie den Wert für method auf "POST" fest und fügen Sie das Feld enctype hinzu. Im folgenden Beispiel wird ein Lesezeichen in der Ziel-App erstellt. Daher wird "POST" für method und "multipart/form-data" für enctype verwendet:

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

Dateien werden akzeptiert

Wie bei Anwendungsänderungen müssen auch Dateien akzeptiert werden, wenn method "POST" ist und die enctype vorhanden ist. Außerdem muss enctype "multipart/form-data" sein und ein files-Eintrag muss hinzugefügt werden.

Du musst außerdem ein files-Array hinzufügen, das die Dateitypen definiert, die deine App akzeptiert. Die Array-Elemente sind Einträge mit zwei Elementen: dem Feld name und dem Feld accept. Das Feld accept kann einen MIME-Typ, eine Dateiendung oder ein Array mit beiden enthalten. Es ist am besten, ein Array anzugeben, das sowohl einen MIME-Typ als auch eine Dateiendung enthält, da sich die Betriebssysteme in Bezug auf die bevorzugte Option unterscheiden.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

Eingehende Inhalte verarbeiten

Wie Sie mit den empfangenen freigegebenen Daten umgehen, liegt in Ihrem Ermessen und hängt von Ihrer App ab. Beispiele:

  • Ein E-Mail-Client könnte eine neue E-Mail mit title als Betreff verfassen und text und url als Textkörper zusammenführen.
  • Eine App für soziale Netzwerke könnte einen neuen Beitrag entwerfen, title ignorieren, text als Textkörper der Nachricht verwenden und url als Link hinzufügen. Wenn text fehlt, verwendet die App möglicherweise auch url im Textkörper. Wenn url fehlt, scannt die Anwendung möglicherweise text, um nach einer URL zu suchen, und fügt diese als Link hinzu.
  • Eine Foto-Teilen-App könnte eine neue Diashow mit title als Titel, text als Beschreibung und files als Diashow-Bilder erstellen.
  • Eine SMS-App könnte eine neue Nachricht entwerfen, in der text und url verkettet sind und title weggelassen werden.

GET-Freigaben werden verarbeitet

Wenn der Nutzer Ihre Anwendung auswählt und Ihre method "GET" (Standard) ist, öffnet der Browser ein neues Fenster mit der action-URL. Der Browser generiert dann einen Abfragestring anhand der URL-codierten Werte aus dem Manifest. Wenn die Freigabe-App beispielsweise title und text bereitstellt, lautet der Abfragestring ?title=hello&text=world. Verwenden Sie dazu einen DOMContentLoaded-Ereignis-Listener auf der Vordergrundseite und parsen Sie den Abfragestring:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

Verwenden Sie einen Service Worker, um die action-Seite vorab im Cache zu speichern. So kann sie schnell geladen werden und auch dann zuverlässig funktionieren, wenn der Nutzer offline ist. Workbox ist ein Tool, mit dem Sie Precaching in Ihrem Service Worker implementieren können.

POST-Freigaben werden verarbeitet

Wenn Ihre method "POST" ist, wie es der Fall wäre, wenn Ihre Ziel-App einen gespeicherten Lesezeichen oder freigegebene Dateien akzeptiert, enthält der Textkörper der eingehenden POST-Anfrage die von der Freigabe-App übergebenen Daten, die mit dem im Manifest angegebenen enctype-Wert codiert sind.

Die Daten können nicht direkt auf der Vordergrundseite verarbeitet werden. Da die Seite die Daten als Anfrage betrachtet, werden sie an den Service Worker übergeben, wo Sie sie mit einem fetch-Ereignislistener abfangen können. Von hier aus können Sie die Daten mit postMessage() an die Vordergrundseite zurückgeben oder an den Server weitergeben:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

Geteilte Inhalte überprüfen

Ein Android-Smartphone mit der Demo-App und freigegebenen Inhalten.
Die Beispiel-App für die Freigabe.

Prüfen Sie eingehende Daten. Leider gibt es keine Garantie dafür, dass andere Apps die entsprechenden Inhalte im richtigen Parameter teilen.

Unter Android ist beispielsweise das Feld url leer, da es im Freigabesystem von Android nicht unterstützt wird. Stattdessen werden URLs häufig im Feld text oder gelegentlich im Feld title angezeigt.

Unterstützte Browser

Die Web Share Target API wird wie unten beschrieben unterstützt:

Auf allen Plattformen muss Ihre Webanwendung installiert sein, damit sie als potenzielles Ziel für den Empfang freigegebener Daten angezeigt wird.

Beispielanwendungen

Unterstützung für die API anzeigen

Beabsichtigen Sie, die Web Share Target API zu verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #WebShareTarget und teilen Sie uns mit, wo und wie Sie ihn verwenden.