Mit der Web Share Target API wird die Freigabe auf Mobilgeräten und Computern vereinfacht.
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.
![Android-Smartphone, auf dem die Leiste „Teilen über“ geöffnet ist.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=6&hl=de)
Web Share Target (Ziel) in Aktion sehen
- 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.
- 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.
- Öffne eine App, die das Teilen unterstützt, oder verwende die Schaltfläche „Teilen“ in der Demo-App.
- 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, wobeitext
undurl
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 undurl
als Link hinzufügt. Wenntext
fehlt, verwendet die App möglicherweise auchurl
im Text. Wennurl
fehlt, scannt die Anwendung möglicherweisetext
, 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 undfiles
als Diashow-Bilder erstellen. - Eine SMS-App könnte eine neue Nachricht verfassen, bei der
text
undurl
miteinander verkettet sind undtitle
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
![Ein Android-Smartphone, auf dem die Demo-App mit geteilten Inhalten angezeigt wird.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=6&hl=de)
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
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.