ServiceWorker: postMessage()-Methode

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

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 strukturierter 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; es wird im data-Feld im Event enthalten sein, das an das message-Ereignis übermittelt wird. Dies kann jedes JavaScript-Objekt sein, das vom strukturierter Klon-Algorithmus verarbeitet wird.

Der message-Parameter ist obligatorisch. Wenn die Daten, die an den Worker übergeben werden sollen, unbedeutend sind, müssen null oder undefined explizit übergeben werden.

transfer Optional

Ein optionales Array von transferierbaren Objekten, um das Eigentum zu übertragen. Das Eigentum dieser Objekte wird auf die Empfangsseite übertragen und sie sind auf der sendenden Seite nicht mehr verwendbar. Diese transferierbaren Objekte sollten an die Nachricht angehängt werden; andernfalls würden sie verschoben, aber am Empfangsort nicht tatsächlich zugänglich sein.

options Optional

Ein optionales Objekt mit den folgenden Eigenschaften:

transfer Optional: 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 in seinem globalen Kontext 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 am ServiceWorkerContainer-Objekt hören.

Spezifikationen

Specification
Service Workers # dom-serviceworker-postmessage
Service Workers # dom-serviceworker-postmessage-message-options

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Die ServiceWorker-Schnittstelle, zu der sie gehört.
Das Gegenstück, die postMessage()-Methode, die ein Service-Worker verwenden muss, um eine Nachricht an das zugehörige ServiceWorkerContainer zu senden.