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.
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ä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 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 App zum Teilen von Fotos könnte eine neue Diashow mit
title
als Titel,text
als Beschreibung undfiles
als Bilder für die Diashow erstellen. - Eine Messaging-App könnte eine neue Nachricht mit
text
undurl
erstellen, die zusammengefügt werden, undtitle
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
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.