ServiceWorkerContainer: message-Ereignis

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.

Das message-Ereignis wird auf einer Seite verwendet, die von einem Service Worker kontrolliert wird, um Nachrichten vom Service Worker zu empfangen.

Dieses Ereignis kann nicht abgebrochen werden und verteilt sich nicht.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("message", (event) => {});

onmessage = (event) => {};

Ereignistyp

Ein MessageEvent. Erbt von Event.

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.

MessageEvent.data Schreibgeschützt: Die vom Nachrichtensender gesendeten Daten.
MessageEvent.origin Schreibgeschützt: Ein String, der den Ursprung des Nachrichtensenders darstellt.
MessageEvent.lastEventId Schreibgeschützt: Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source Schreibgeschützt: Eine MessageEventSource (kann ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein), die den Nachrichtensender darstellt.
MessageEvent.ports Schreibgeschützt: Ein Array von MessagePort-Objekten, die die Ports darstellen, die mit dem Kanal verbunden sind, durch den die Nachricht gesendet wird (wo zutreffend, z. B. bei der Kanalnachrichtenübermittlung oder beim Senden einer Nachricht an einen gemeinsamen Worker).

Beispiele

In diesem Beispiel erhält der Service Worker die ID des Clients von einem fetch-Ereignis und sendet ihm dann eine Nachricht mit Client.postMessage:

// service-worker.js
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage("Hi client!");
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});

Der Client kann die Nachricht empfangen, indem er das message-Ereignis abhört:

// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});

Alternativ kann der Client die Nachricht mit dem onmessage-Ereignishandler empfangen:

// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};

Spezifikationen

Specification
Service Workers # dom-serviceworkercontainer-onmessage