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.
Web Share Target in Aktion
- Ö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.
- Klicken Sie auf Installieren, um die App zum Startbildschirm hinzuzufügen, oder verwenden Sie das Chrome-Menü, um sie hinzuzufügen.
- Öffnen Sie eine App, die das Teilen unterstützt, oder verwenden Sie die Schaltfläche „Teilen“ in der Demo-App.
- 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 undtext
undurl
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 undurl
als Link hinzufügen. Wenntext
fehlt, verwendet die App möglicherweise auchurl
im Textkörper. Wennurl
fehlt, scannt die Anwendung möglicherweisetext
, 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 undfiles
als Diashow-Bilder erstellen. - Eine SMS-App könnte eine neue Nachricht entwerfen, in der
text
undurl
verkettet sind undtitle
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
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.