Client: postMessage()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
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 strukturiert-klonbare Typ sein.
transfer
Optional-
Ein optionales Array von übertragbaren Objekten, um das Eigentum zu übertragen. Das Eigentum an diesen Objekten wird auf die Empfängerseite übertragen und sie sind auf der sendenden Seite nicht mehr verwendbar. Diese übertragbaren Objekte sollten an die Nachricht angehängt werden; sonst würden sie verschoben, aber tatsächlich nicht auf der Empfängerseite zugänglich.
options
Optional-
Ein optionales Objekt, das die folgenden Eigenschaften enthält:
transfer
Optional-
Hat die gleiche Bedeutung wie der
transfer
-Parameter.
Rückgabewert
Keiner (undefined
).
Beispiele
Der unten stehende Code sendet eine Nachricht von einem Service Worker an einen Client. Der Client wird mit der get()
-Methode auf clients
, einem Global im Service Worker Scope, abgerufen.
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
Specification |
---|
Service Workers # dom-client-postmessage-message-options |
Browser-Kompatibilität
BCD tables only load in the browser