Einfacheres Teilen auf Mobilgeräten und Computern mit der Web Share Target API
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">![Android-Smartphone mit der Funktion "Teilen über" Leiste geöffnet.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=9&hl=de)
Web Share Target in Aktion
- 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.
- Wenn Sie dazu aufgefordert werden, klicken Sie auf Installieren, um die App zum Startbildschirm hinzuzufügen. über das Chrome-Menü zu deinem Startbildschirm.
- Öffne eine App, die das Teilen unterstützt, oder verwende die Schaltfläche „Teilen“ in der Demo-App.
- 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, wobeitext
undurl
als Text verkettet sind. - Eine App für soziale Netzwerke könnte einen neuen Beitrag ohne
title
entwerfen, mithilfe vontext
als Text der Nachricht und fügenurl
als Link hinzu. Wenntext
gleich fehlt, kann die App auchurl
im Text verwenden. Wennurl
fehlt: Die App scannt 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 der Diashow,text
als Beschreibung undfiles
als Bilder für die Diashow. - Eine SMS-App könnte mit
text
undurl
eine neue Nachricht verfassen verkettet sind undtitle
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">![Ein Android-Smartphone, auf dem die Demo-App mit geteilten Inhalten zu sehen ist.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=9&hl=de)
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.