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 Daten, die an den Worker gesendet werden sollen. Die Daten können jedes JavaScript-Objekt sein, das vom structured clone algorithmus 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 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 des an das message-Ereignis übermittelten Ereignisses enthalten sein. Dies kann jedes JavaScript-Objekt sein, das vom structured clone algorithmus behandelt wird.

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

transfer Optional

Ein optionales Array von übertragbaren Objekten, deren Eigentum übertragen werden soll. Das Eigentum an diesen Objekten wird auf die Zielseite übertragen und sie sind auf der sendenden Seite nicht mehr verwendbar. Diese übertragbaren Objekte sollten an die Nachricht angehängt werden, andernfalls würden sie verschoben, sind aber auf der empfangenden Seite nicht tatsächlich 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).

Ausnahmen

SyntaxError: Wird ausgelöst, wenn der message-Parameter nicht angegeben ist.

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-Ereignis im globalen Bereich abhören.

// This must be in `service-worker.js`
addEventListener("message", (event) => {
  console.log(`Message received: ${event.data}`);
});

Beachten Sie, dass der Service Worker mit der postMessage()-Methode Nachrichten an den Haupt-Thread zurücksenden kann. Um diese zu empfangen, muss der Haupt-Thread ein message-Ereignis am ServiceWorkerContainer-Objekt abhören.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

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