share_target
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.
Das share_target
Manifestmitglied ermöglicht es installierten Progressive Web Apps (PWAs), als Freigabeziel im Freigabedialog des Systems registriert zu werden.
Sobald eine PWA registriert und installiert ist, die die Web Share Target API verwendet, agiert sie als Ziel für die Freigabe von Inhalten, zusammen mit typischen systemeigenen Freigabezielen wie E-Mail, Messenger und anderen nativen Apps, die freigegebene Inhalte empfangen können.
Hinweis:
Wenn Sie Daten mit der Web Share API freigeben möchten, siehe Web Share API und navigator.share()
.
Werte
Der Wert des share_target
Mitglieds ist ein Objekt, das definiert, wie eine Anwendung freigegebene Daten empfangen kann. Dieses Objekt kann folgende Eigenschaften enthalten (action
und params
sind erforderlich):
action
-
Die URL für das Web Share Target.
enctype
Optional-
Die Kodierung der Freigabedaten, wenn eine
POST
-Anfrage verwendet wird. Wird beiGET
-Anfragen ignoriert. method
Optional-
Die zu verwendende HTTP-Anfragemethode. Entweder
GET
oderPOST
. Verwenden SiePOST
, wenn die freigegebenen Daten binäre Daten wie Bild(er) enthalten oder wenn sie die Ziel-App ändern, z. B. wenn sie einen Datenpunkt wie ein Lesezeichen erstellen. params
-
Ein Objekt zur Konfiguration der Freigabeparameter. Die Schlüssel des Objekts entsprechen dem
data
Objekt innavigator.share()
. Die Werte des Objekts können angegeben werden und werden als Abfrageparameter verwendet:title
Optional: Name des Abfrageparameters zur Verwendung für den Titel des freigegebenen Dokuments.text
Optional: Name des Abfrageparameters für den Text (oder Körper) der freigegebenen Nachricht.url
Optional: Name des Abfrageparameters für die URL der freigegebenen Ressource.files
Optional: Ein Objekt (oder ein Array von Objekten), das definiert, welche Dateien vom Freigabeziel akzeptiert werden. Das Objekt erfordert die folgenden Eigenschaften:name
: Name des Formularfelds, das für die Freigabe von Dateien verwendet wird.accept
: Ein String (oder ein Array von Strings) der akzeptierten MIME-Typen oder Dateierweiterungen.
Beispiele
Empfang von Freigabedaten mit GET
Ein Freigabeziel kann mit dem folgenden share_target
Manifestmitglied registriert werden:
{
"share_target": {
"action": "/shared-content-receiver/",
"method": "GET",
"params": {
"title": "name",
"text": "description",
"url": "link"
}
}
}
Wenn ein Benutzer Ihre App im Freigabedialog des Systems auswählt, wird Ihre PWA gestartet, und eine GET
HTTP-Anfrage wird an die angegebene URL gesendet, einschließlich der spezifizierten Abfrageparameter. Es sieht dann so aus: /shared-content-receiver/?name=a+shared+name&description=a+shared+description&link=https%3A%2F%2Fexample.com%2F
.
Die URLSearchParams Schnittstelle kann nützlich sein, um mit den in Ihrer Anwendung geteilten Daten umzugehen und etwas damit zu machen.
const sharedName = url.searchParams.get("name");
const sharedDescription = url.searchParams.get("description");
const sharedLink = url.searchParams.get("link");
Empfang von Freigabedaten mit POST
Wenn die Freigabeanfrage eine oder mehrere Dateien enthält oder einen Seiteneffekt in Ihrer Anwendung verursacht, sollte die HTTP POST
Methode verwendet werden. Zum Beispiel, wenn Ihre Anwendung Bilder für die weitere Verarbeitung erhält oder einen freigegebenen Link als Lesezeichen in Ihrer Datenbank speichern möchte.
{
"share_target": {
"action": "/save-bookmark/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Sie können entweder serverseitigen Code verwenden, um die POST
Freigabedaten zu verarbeiten, oder ein fetch
Ereignislistener kann verwendet werden, um die HTTP-Anfrage abzufangen, was den Zugriff auf die Daten in einem Service Worker ermöglicht und eine bessere Erfahrung für Offline-Nutzer bietet.
self.addEventListener("fetch", (event) => {
// Regular requests not related to Web Share Target.
if (event.request.method !== "POST") {
event.respondWith(fetch(event.request));
return;
}
// Requests related to Web Share Target.
event.respondWith(
(async () => {
const formData = await event.request.formData();
const link = formData.get("link") || "";
// Instead of the original URL `/save-bookmark/`, redirect
// the user to a URL returned by the `saveBookmark()`
// function, for example, `/`.
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})(),
);
});
Die POST
Anfrage sollte idealerweise mit einem HTTP 303 See Other Redirect beantwortet werden, um zu vermeiden, dass mehrere POST
Anfragen gesendet werden, wenn beispielsweise ein Seitenneuladen durch den Benutzer initiiert wurde.
Empfang von freigegebenen Dateien
Um freigegebene Dateien zu akzeptieren, muss die HTTP-Methode POST
sein, die enctype
muss multipart/form-data
sein, und ein files
Eintrag, der die akzeptierten Dateitypen definiert, muss bereitgestellt werden.
Dateien müssen eine name
Eigenschaft haben, und die accept
Eigenschaft muss akzeptierte MIME-Typen oder Dateierweiterungen angeben. Es ist wahrscheinlich eine gute Idee, beide zu definieren, da Betriebssysteme sich darin unterscheiden können, welches sie bevorzugen.
{
"share_target": {
"action": "/file-collector",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "lists",
"accept": ["text/csv", ".csv"]
},
{
"name": "photos",
"accept": ["image/svg+xml", ".svg"]
}
]
}
}
}
Um mit freigegebenen Datei-Daten umzugehen, siehe das POST
Beispiel oben und die FileReader
API, um die Dateien zu lesen. Um die Dateien vom Service Worker-Kontext zu den Client-Kontexten zu bekommen, ist es eine Möglichkeit, die Dateien vorübergehend im Cache
oder IndexedDB zu speichern und dann seine Clients mit Client.postMessage()
zu benachrichtigen.
Sicherheit & Datenschutz
Ihre PWA kann nur als Web-Freigabeziel fungieren, wenn sie installiert ist. Siehe auch Anleitung zum Installieren von PWAs.
Ähnlich wie bei HTML-Formularübermittlungen sollten Sie vorsichtig mit Daten umgehen, die über das Freigabeziel an Ihre Anwendung gesendet werden. Stellen Sie sicher, dass Sie eingehende Daten validieren, bevor Sie sie verwenden.
Spezifikationen
Specification |
---|
Web Share Target API # share_target-member |
Browser-Kompatibilität
BCD tables only load in the browser