Freigegebene Daten mit der Web Share Target API empfangen

Einfacheres Teilen auf Mobilgeräten und Computern mit der Web Share Target API

Pete LePage
Joe Medley
Joe Medley
GitHub

Auf einem Mobilgerät oder Computer sollte das Teilen ganz einfach sein: Klicken Sie einfach auf die Schaltfläche Teilen, eine App auswählen und mit wem Sie Inhalte teilen möchten. Vielleicht möchten Sie einen interessanten Artikel teilen, entweder per E-Mail an Freunde oder per Tweet an auf der ganzen Welt.

Früher konnten nur plattformspezifische Apps beim Betriebssystem registriert werden, Freigaben von anderen installierten Apps empfangen. Mit der Web Share Target API Installierte Web-Apps können beim zugrunde liegenden Betriebssystem registriert werden. als Ziel für geteilte Inhalte.

<ph type="x-smartling-placeholder">
</ph> Android-Smartphone mit der Funktion &quot;Teilen über&quot; Leiste geöffnet. <ph type="x-smartling-placeholder">
</ph> Freigabezielauswahl auf Systemebene mit einer installierten PWA als Option.

Web Share Target in Aktion

  1. Sie nutzen Chrome 76 oder höher für Android bzw. Chrome 89 oder höher auf öffnen Sie die Demo zu Web Share Target.
  2. Wenn Sie dazu aufgefordert werden, klicken Sie auf Installieren, um die App zum Startbildschirm hinzuzufügen. über das Chrome-Menü zu deinem Startbildschirm.
  3. Öffne eine App, die das Teilen unterstützt, oder verwende die Schaltfläche „Teilen“ in der Demo-App.
  4. Wähle in der Zielauswahl Web Share Test aus.

Nach der Freigabe sollten Sie alle freigegebenen Informationen in Web-Share-Ziel-Web-App an.

App als Ziel zum Teilen registrieren

Damit Sie Ihre App als Ziel zum Teilen registrieren können, muss sie den Chrome-Richtlinien für Kriterien für die Installierbarkeit. Bevor ein Nutzer Dateien freigeben kann, müssen sie es zu ihrem Startbildschirm hinzufügen. Dadurch wird verhindert, dass Websites sich nach dem Zufallsprinzip zur Share-Intent-Auswahl der Nutzenden hinzufügen, die Nutzer mit Ihrer App tun möchten.

Web-App-Manifest aktualisieren

Um deine App als Ziel zum Teilen zu registrieren, füge einen share_target-Eintrag zu ihrem Web hinzu App-Manifest. Dadurch wird das Betriebssystem angewiesen, Ihre App eine Option in der Intent-Auswahl. Was Sie dem Manifest hinzufügen, steuert die Daten die Ihre App akzeptiert. Es gibt drei gängige Szenarien für das share_target. Eintrag:

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

Grundlegende Informationen werden akzeptiert

Wenn Ihre Ziel-App lediglich grundlegende Informationen wie Daten, Links, und Text enthält, 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 Anwendung bereits ein Schema zum Teilen von URLs hat, können Sie das params ersetzen. durch Ihre vorhandenen Suchparameter ersetzen. Wenn z. B. Ihre Freigabe-URL verwendet body anstelle von text, können Sie "text": "text" durch "text": "body" ersetzen.

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

Anwendungsänderungen werden akzeptiert

Wenn die Ziel-App durch die freigegebenen Daten geändert wird, z. B. durch Speichern eines in der Zielanwendung als Lesezeichen speichern: Legen Sie für method den Wert "POST" fest und das Feld enctype. Im folgenden Beispiel wird ein Lesezeichen in der Ziel-App erstellt. Daher wird "POST" für den method und "multipart/form-data" für den enctype:

{
  "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 das Akzeptieren von Dateien "POST" sein. und enctype vorhanden sein. Außerdem muss enctype "multipart/form-data" 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. ein. Für das Feld accept kann ein MIME-Typ, eine Dateiendung oder ein Array angegeben werden das beides enthält. Es ist am besten, ein Array bereitzustellen, das sowohl ein MIME-Typ und eine Dateiendung, da sich die Betriebssysteme die 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"
        }
      ]
    }
  }
}

Eingehenden Inhalt verarbeiten

Wie Sie mit den eingehenden Daten umgehen, bleibt Ihnen überlassen. Hier einige Beispiele:

  • Ein E-Mail-Client könnte eine neue E-Mail mit title als Betreff einer E-Mail, wobei text und url als Text verkettet sind.
  • Eine App für soziale Netzwerke könnte einen neuen Beitrag ohne title entwerfen, mithilfe von text als Text der Nachricht und fügen url als Link hinzu. Wenn text gleich fehlt, kann die App auch url im Text verwenden. Wenn url fehlt: Die App scannt 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 der Diashow, text als Beschreibung und files als Bilder für die Diashow.
  • Eine SMS-App könnte mit text und url eine neue Nachricht verfassen verkettet sind und title löschen.

GET-Freigaben werden verarbeitet

Wenn der Nutzer Ihre Anwendung auswählt und Ihr method "GET" ist (der verwendet, öffnet der Browser unter der action-URL ein neues Fenster. Der Browser generiert einen Abfragestring mithilfe der URL-codierten Werte, die im Manifest angegeben sind. Wenn die Freigabeanwendung beispielsweise title und text bereitstellt, lautet der Abfragestring ?title=hello&text=world Verwenden Sie zur Verarbeitung einen DOMContentLoaded. Event-Listener auf der Vordergrundseite und parst 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 das action vorab im Cache zu speichern. damit sie schnell geladen wird und zuverlässig funktioniert, selbst wenn der Nutzer offline ist. Workbox ist ein Tool, das Ihnen dabei helfen kann, Precaching in Ihrem Service Worker implementieren

POST-Freigaben werden verarbeitet

Wenn Ihre method "POST" ist, wäre es so, wenn Ihre Ziel-App eine gespeicherte oder freigegebene Dateien enthält, enthält der Text der eingehenden POST-Anfrage Die von der Freigabeanwendung übergebenen Daten, codiert mit dem Wert enctype die im Manifest angegeben sind.

Diese Daten können auf der Vordergrundseite nicht direkt verarbeitet werden. Da die Seite die Daten als eine Anfrage sendet, leitet die Seite sie an den Service Worker weiter, wo Sie sie dann mit einer fetch Event-Listener. Von hier aus können Sie die Daten wieder in den Vordergrund Seite mit postMessage() an oder übergeben Sie sie an den Server:

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 werden überprüft

<ph type="x-smartling-placeholder">
</ph> Ein Android-Smartphone, auf dem die Demo-App mit geteilten Inhalten zu sehen ist. <ph type="x-smartling-placeholder">
</ph> Beispiel für eine Ziel-App zur Freigabe

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

Auf Android-Geräten ist das Feld url beispielsweise leer, weil wird es im Freigabesystem von Android nicht unterstützt. Stattdessen erscheinen URLs häufig in im Feld text oder gelegentlich im Feld title.

Unterstützte Browser

Die Web Share Target API wird so unterstützt:

Auf allen Plattformen muss Ihre Web-App installiert sein, bevor sie als potentielles Ziel für den Empfang geteilter Daten.

Beispielanwendungen

Unterstützung für die API anzeigen

Möchtest du die Web Share Target API verwenden? Dein öffentlicher Support hilft dem Chromium-Team Funktionen priorisieren und anderen Browseranbietern zeigen, wie wichtig es für ihre Unterstützung ist.

Sende einen Tweet mit dem Hashtag an @ChromiumDev #WebShareTarget und teilen Sie uns mit, wo und wie Sie sie nutzen.