Freigegebene Daten mit der Web Share Target API empfangen

Mit der Web Share Target API wird die Freigabe auf Mobilgeräten und Computern vereinfacht.

Pete LePage

Joe Medley

Auf einem Mobilgerät oder Desktop-Gerät sollte die Freigabe so einfach sein wie das Klicken auf die Schaltfläche Share, das Auswählen einer App und das Festlegen, für wen sie freigegeben werden. Vielleicht möchten Sie einen interessanten Artikel teilen, indem Sie ihn per E-Mail an Freunde senden oder mit einem Tweet an die ganze Welt twittern.

In der Vergangenheit konnten nur plattformspezifische Apps beim Betriebssystem registriert werden, um Freigaben von anderen installierten Apps zu erhalten. Mit der Web Share Target API können sich installierte Webanwendungen beim zugrunde liegenden Betriebssystem als Freigabeziel registrieren, um freigegebene Inhalte zu empfangen.

Web Share Target (Ziel) in Aktion sehen

1. Wenn Sie Chrome 76 oder höher für Android oder Chrome 89 oder höher für Computer verwenden, öffnen Sie die Web Share Target-Demo.
2. Wenn Sie dazu aufgefordert werden, klicken Sie auf Installieren, um die App dem Startbildschirm hinzuzufügen, oder fügen Sie sie über das Chrome-Menü dem Startbildschirm hinzu.
3. Öffne eine App, die das Teilen unterstützt, oder verwende die Schaltfläche „Teilen“ in der Demo-App.
4. Wählen Sie in der Zielauswahl Web Share Test (Webfreigabetest) aus.

Nach der Freigabe sollten Sie alle freigegebenen Informationen in der Web-App für das Freigabeziel sehen.

App als Ziel für geteilte Inhalte registrieren

Damit Ihre App als gemeinsames Ziel registriert werden kann, muss sie die Kriterien für die Installierbarkeit von Chrome erfüllen. Außerdem muss ein Nutzer die App zu seinem Startbildschirm hinzufügen, bevor er Inhalte in Ihrer App teilen kann. Dadurch wird verhindert, dass sich Websites willkürlich der Share-Intent-Auswahl des Nutzers hinzufügen, und es wird sichergestellt, dass die Freigabe etwas ist, das Nutzer mit Ihrer App tun möchten.

Manifest der Web-App aktualisieren

Wenn Sie Ihre App als Freigabeziel registrieren möchten, fügen Sie dem Web-App-Manifest einen share_target-Eintrag hinzu. Dadurch wird das Betriebssystem angewiesen, Ihre App als Option in die Intent-Auswahl aufzunehmen. Was du dem Manifest hinzufügst, bestimmt, welche Daten deine App akzeptiert. Es gibt drei gängige Szenarien für den Eintrag share_target:

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

Grundlegende Informationen werden akzeptiert

Wenn Ihre Zielanwendung nur grundlegende Informationen wie Daten, Links und Text akzeptiert, fügen Sie der Datei manifest.json Folgendes hinzu:

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

Wenn Ihre App bereits ein Schema zum Teilen von URLs hat, können Sie die params-Werte durch die vorhandenen Abfrageparameter ersetzen. Wenn Ihr URL-Schema zum Teilen beispielsweise body anstelle von text verwendet, könnten Sie "text": "text" durch "text": "body" ersetzen.

Wenn kein Wert für method angegeben wird, wird standardmäßig "GET" verwendet. Das Feld enctype, das in diesem Beispiel nicht gezeigt wird, gibt den Codierungstyp der Daten an. Für die Methode "GET" ist enctype standardmäßig auf "application/x-www-form-urlencoded" festgelegt und wird ignoriert, wenn sie auf einen anderen Wert festgelegt ist.

Bewerbungsänderungen annehmen

Wenn die Ziel-App durch die freigegebenen Daten verändert wird, z. B. durch Speichern eines Lesezeichens in der Zielanwendung, setzen Sie den Wert method auf "POST" und schließen Sie das Feld enctype ein. Im folgenden Beispiel wird ein Lesezeichen in der Ziel-App erstellt. Deshalb 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 muss method für die Annahme von Dateien "POST" und enctype vorhanden sein. 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 von deiner App akzeptiert werden. Die Arrayelemente sind Einträge mit zwei Elementen: dem Feld name und dem Feld accept. Das Feld accept verwendet einen MIME-Typ, eine Dateiendung oder ein Array, das beides enthält. Es empfiehlt sich, ein Array anzugeben, das sowohl einen MIME-Typ als auch eine Dateiendung enthält, da sich die Betriebssysteme unterscheiden, was sie bevorzugen.

{
  "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 eingehenden freigegebenen Daten umgehen, hängt von Ihrer Anwendung ab. Beispiel:

• Ein E-Mail-Client könnte eine neue E-Mail entwerfen und dabei title als Betreff der E-Mail verwenden, wobei text und url als Text verkettet sind.
• Eine App für soziale Netzwerke könnte einen neuen Beitrag entwerfen, der title ignoriert, text als Text der Nachricht verwendet und url als Link hinzufügt. Wenn text fehlt, verwendet die App möglicherweise auch url im Text. Wenn url fehlt, scannt die Anwendung möglicherweise text, um eine URL zu finden, und fügt diese als Link hinzu.
• Eine App zum Teilen von Fotos könnte eine neue Diashow mit title als Titel der Diashow, text als Beschreibung und files als Diashow-Bilder erstellen.
• Eine SMS-App könnte eine neue Nachricht verfassen, bei der text und url miteinander verkettet sind und title gelöscht werden würde.

GET-Freigaben werden verarbeitet

Wenn der Nutzer Ihre Anwendung auswählt und Ihr method "GET" (Standardeinstellung) ist, öffnet der Browser ein neues Fenster unter der URL action. Der Browser generiert dann mithilfe der im Manifest bereitgestellten URL-codierten Werte einen Abfragestring. Wenn die Freigabe-App beispielsweise title und text bereitstellt, lautet der Abfragestring ?title=hello&text=world. Verwenden Sie dazu auf der Vordergrundseite einen DOMContentLoaded-Ereignis-Listener 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 Seite action im Voraus im Cache zu speichern. So kann sie schnell geladen werden und zuverlässig funktionieren, auch wenn der Nutzer offline ist. Workbox ist ein Tool, mit dem Sie das Precaching in Ihrem Service Worker implementieren können.

POST-Freigaben werden verarbeitet

Wenn method auf "POST" gesetzt ist, was es beispielsweise wäre, wenn Ihre Ziel-App ein gespeichertes Lesezeichen oder freigegebene Dateien akzeptiert, enthält der Text der eingehenden POST-Anfrage die Daten, die von der Freigabeanwendung übergeben werden. Diese sind mit dem Wert enctype im Manifest codiert.

Die Vordergrundseite kann diese Daten nicht direkt verarbeiten. Da die Seite die Daten als Anfrage sieht, leitet sie sie an den Service Worker weiter, von dem sie mit einem fetch-Ereignis-Listener abgefangen werden können. Von hier können Sie die Daten mit postMessage() an die Vordergrundseite zurück oder an den Server übergeben:

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

Prüfen Sie eingehende Daten. Leider kann nicht garantiert werden, dass andere Apps den richtigen Inhalt 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:

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

Beispielanwendungen

• Squoosh
• Gästebuch-PWA

Unterstützung für die API zeigen

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

Sende einen Tweet mit dem Hashtag #WebShareTarget an @ChromiumDev und teile uns mit, wo und wie du es verwendest.