ServiceWorker: 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.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die postMessage() Methode der ServiceWorker-Schnittstelle sendet eine Nachricht an den Worker. Der erste Parameter ist die an den Worker zu sendenden Daten. Diese Daten können jedes JavaScript-Objekt sein, das vom Strukturierten Klonalgoitmus behandelt werden kann.
Der Service Worker kann Informationen an seine Clients zurücksenden, indem er die postMessage() Methode verwendet. Die Nachricht wird nicht an dieses ServiceWorker-Objekt zurückgesendet, sondern an den zugehörigen ServiceWorkerContainer, der über navigator.serviceWorker zugänglich ist.
Syntax
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
Parameter
message-
Das Objekt, das an den Worker übermittelt werden soll; es wird im
data-Feld im Event enthalten sein, das an dasmessage-Event übermittelt wird. Dies kann jedes JavaScript-Objekt sein, das vom Strukturierten Klonalgoitmus behandelt wird.Der
message-Parameter ist obligatorisch. Wenn die Daten, die an den Worker übergeben werden sollen, nicht wichtig sind, mussnulloderundefinedexplizit übergeben werden.Hinweis: Ein Service Worker befindet sich nicht im gleichen Agent-Cluster wie sein Client und kann daher keinen Speicher teilen.
SharedArrayBufferObjekte oder Pufferansichten, die durch einen solchen Puffer unterstützt werden, können nicht über Agent-Cluster hinweg gepostet werden. Der Versuch, dies zu tun, erzeugt einmessageerror-Event, das am empfangenden Ende einenDataCloneErrorDOMExceptionenthält. transferOptional-
Ein optionales Array von übertragbaren Objekten, um deren Eigentum zu transferieren. Das Eigentum dieser Objekte wird auf die Zielseite übertragen und sie sind auf der sendenden Seite nicht mehr nutzbar. Diese übertragbaren Objekte sollten an die Nachricht angehängt werden; andernfalls würden sie zwar verschoben, aber nicht tatsächlich auf der Empfängerseite zugänglich sein.
optionsOptional-
Ein optionales Objekt, das die folgenden Eigenschaften enthält:
transferOptional-
Hat die gleiche Bedeutung wie der
transferParameter.
Rückgabewert
Keiner (undefined).
Ausnahmen
SyntaxError-
Wird ausgelöst, wenn der
message-Parameter nicht bereitgestellt wird.
Beispiele
In diesem Beispiel wird ein ServiceWorker erstellt und sofort eine Nachricht gesendet:
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage(
"Test message sent immediately after creation",
);
});
Um die Nachricht zu empfangen, muss der Service Worker in service-worker.js das message-Event in seinem globalen Kontext überwachen.
// This must be in `service-worker.js`
addEventListener("message", (event) => {
console.log(`Message received: ${event.data}`);
});
Beachten Sie, dass der Service Worker Nachrichten an den Hauptthread zurücksenden kann, indem er die postMessage()-Methode verwendet. Um diese zu empfangen, muss der Hauptthread ein message-Event am ServiceWorkerContainer-Objekt überwachen.
Spezifikationen
| Specification |
|---|
| Service Workers # dom-serviceworker-postmessage |
| Service Workers # dom-serviceworker-postmessage-message-options |
Browser-Kompatibilität
Loading…
Siehe auch
- Die
ServiceWorker-Schnittstelle, zu der es gehört. - Das Gegenstück, die
postMessage()-Methode, die ein Service Worker verwenden muss, um eine Nachricht zurück an den zugehörigenServiceWorkerContainerzu senden.