Freigegebene Daten mit der Web Share Target API empfangen

Mit der Web Share Target API die Freigabe auf Mobilgeräten und Computern vereinfachen

Pete LePage

Joe Medley

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.

Web Share Target in Aktion

1. Öffnen Sie die Demo für das Web-Teilen-Ziel 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 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. So wird verhindert, dass Websites sich selbst der Auswahl der Freigabeabsicht des Nutzers hinzufügen, und es wird sichergestellt, dass die Freigabe eine Aktion ist, die Nutzer mit Ihrer App ausführen möchten.

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
• Änderungen an der Anwendung 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 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.

Änderungen an der Anwendung 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 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.

Außerdem müssen Sie ein files-Array hinzufügen, in dem die Dateitypen definiert sind, die von Ihrer App akzeptiert werden. Die Arrayelemente sind Einträge mit zwei Mitgliedern: einem name-Feld und einem accept-Feld. Das Feld accept kann einen MIME-Typ, eine Dateiendung oder ein Array mit beiden enthalten. Es empfiehlt sich, ein Array anzugeben, das sowohl einen MIME-Typ als auch eine Dateiendung enthält, da sich die Betriebssysteme in dieser Hinsicht 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, sucht die App möglicherweise in text nach einer URL und fügt diese als Link hinzu.
• Eine Foto-Sharing-App könnte eine neue Diashow mit title als Titel, text als Beschreibung und files als Bildern 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 Ihre method "GET" (Standard) ist, öffnet der Browser ein neues Fenster mit der action-URL. 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 Dienst-Worker, um die action-Seite vorab zu cachen, damit sie schnell geladen wird und auch dann zuverlässig funktioniert, 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

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

Auf Android-Geräten 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 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

• Squoosh
• Scrapbook-PWA

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.