Client: postMessage()-Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2018 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist nur in Service Workers verfügbar.
Die postMessage()-Methode der Client-Schnittstelle ermöglicht es einem Service Worker, eine Nachricht an einen Client (ein Window, Worker oder SharedWorker) zu senden. Die Nachricht wird im message-Ereignis auf navigator.serviceWorker empfangen.
Syntax
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
Parameter
message-
Die Nachricht, die an den Client gesendet werden soll. Dies kann jeder strukturklonbare Typ sein.
Hinweis: Ein Service Worker befindet sich nicht im selben Agent-Cluster wie sein Client und kann daher keinen Speicher teilen.
SharedArrayBuffer-Objekte oder Pufferansichten, die von einem unterstützt werden, können nicht über Agent-Cluster hinweg gesendet werden. Der Versuch, dies zu tun, führt zu einemmessageerror-Ereignis, das einenDataCloneError-DOMExceptionauf der empfangenden Seite enthält. transferOptional-
Ein optionales Array von übertragbaren Objekten, deren Eigentum übertragen werden soll. Das Eigentum an diesen Objekten wird an die Zielseite gegeben und sie sind auf der sendenden Seite nicht mehr nutzbar. Diese übertragbaren Objekte werden nicht automatisch gesendet; sie müssen entweder in der Nachricht enthalten sein oder für den Empfänger auf andere Weise zugänglich sein, wie z. B. über
MessagePortüberMessageEvent.ports. optionsOptional-
Ein optionales Objekt, das die folgenden Eigenschaften enthält:
transferOptional-
Hat die gleiche Bedeutung wie der
transfer-Parameter.
Rückgabewert
Keiner (undefined).
Beispiele
Der untenstehende Code sendet eine Nachricht von einem Service Worker an einen Client. Der Client wird mit der get()-Methode auf clients abgerufen, das ein Global im Service Worker-Bereich ist.
addEventListener("fetch", (event) => {
event.waitUntil(
(async () => {
// Exit early if we don't have access to the client.
// Eg, if it's cross-origin.
if (!event.clientId) return;
// Get the client.
const client = await self.clients.get(event.clientId);
// Exit early if we don't get the client.
// Eg, if it closed.
if (!client) return;
// Send a message to the client.
client.postMessage({
msg: "Hey I just got a fetch from you!",
url: event.request.url,
});
})(),
);
});
Empfangen dieser Nachricht:
navigator.serviceWorker.addEventListener("message", (event) => {
console.log(event.data.msg, event.data.url);
});
Spezifikationen
| Spezifikation |
|---|
| Service Workers Nightly # dom-client-postmessage-message-options |