ServiceWorker: 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.
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 sind die Daten, die an den Worker gesendet werden sollen. Die Daten können jedes JavaScript-Objekt sein, das vom strukturieren Klon-Algorithmus verarbeitet 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 das zugehörige ServiceWorkerContainer, das über navigator.serviceWorker verfügbar ist.
Syntax
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
Parameter
message-
Das Objekt, das an den Worker übermittelt werden soll; dieses wird im
data-Feld des Ereignisses enthalten sein, das an dasmessage-Ereignis geliefert wird. Dies kann jedes JavaScript-Objekt sein, das vom strukturierten Klon-Algorithmus verarbeitet 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.
SharedArrayBuffer-Objekte oder Pufferansichten, die von einem solchen unterstützt werden, können nicht über Agent-Cluster hinweg gepostet werden. Der Versuch, dies zu tun, erzeugt einmessageerror-Ereignis, das einenDataCloneError-DOMExceptionauf der empfangenden Seite enthält. transferOptional-
Ein optionales Array von übertragbaren Objekten, deren Eigentum übertragen werden soll. Das Eigentum dieser Objekte wird an die Zielseite übergeben und sie sind auf der sendenden Seite nicht mehr verwendbar. Diese übertragbaren Objekte werden nicht automatisch gesendet; sie müssen entweder in der Nachricht enthalten sein oder dem Empfänger über andere Mittel zugänglich gemacht werden, wie z.B.
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).
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 auf das message-Ereignis im globalen Bereich hören.
// 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 Haupt-Thread zurücksenden kann, indem er die postMessage()-Methode verwendet. Um diese zu empfangen, muss der Haupt-Thread auf ein message-Ereignis auf dem ServiceWorkerContainer-Objekt hören.
Spezifikationen
| Spezifikation |
|---|
| Service Workers Nightly # dom-serviceworker-postmessage |
| Service Workers Nightly # dom-serviceworker-postmessage-message-options |
Browser-Kompatibilität
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 an das zugehörigeServiceWorkerContainerzu senden.