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 Empfänger. 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 „Teilen ü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ählen Sie in der Auswahl der Ziele Web Share Test aus.

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

App als Ziel zum Teilen registrieren

Damit Sie Ihre App als gemeinsames Ziel registrieren können, muss sie die Kriterien für die Installierbarkeit von 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:

  • Allgemeine Informationen akzeptieren
  • Anwendungsänderungen werden akzeptiert
  • 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 in Ihrem Freigabe-URL-Schema beispielsweise body anstelle von text verwendet wird, können Sie "text": "text" durch "text": "body" ersetzen.

Wenn der Wert für method nicht angegeben ist, wird standardmäßig "GET" verwendet. 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 akzeptieren

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 akzeptieren

Wie bei Anwendungsänderungen erfordert das Akzeptieren von Dateien, dass method auf "POST" gesetzt ist und enctype vorhanden ist. Außerdem muss enctype "multipart/form-data" sein und ein files-Eintrag muss hinzugefügt werden.

Außerdem müssen Sie ein files-Array hinzufügen, in dem die Dateitypen definiert sind, die von Ihrer App akzeptiert werden. 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 App zum Teilen von Fotos könnte eine neue Diashow mit title als Titel, text als Beschreibung und files als Bilder für die Diashow erstellen.
  • Eine Messaging-App könnte eine neue Nachricht mit text und url erstellen, die zusammengefügt werden, und title löschen.

GET-Freigaben werden verarbeitet

Wenn der Nutzer Ihre Anwendung auswählt und für method der Wert "GET" (Standardeinstellung) festgelegt ist, öffnet der Browser unter der URL action ein neues Fenster. Der Browser generiert dann einen Abfragestring mit den im Manifest angegebenen URL-codierten Werten. 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 verarbeiten

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-Ziel-App für die Freigabe.

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

Unter Android ist das Feld url beispielsweise leer, da es vom 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 so 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

Möchtest du die Web Share Target API 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.