ServiceWorkerGlobalScope: 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 nur in Service Workers verfügbar.

Das message-Ereignis der ServiceWorkerGlobalScope-Schnittstelle tritt auf, wenn eingehende Nachrichten empfangen werden. Kontrollierte Seiten können die Methode ServiceWorker.postMessage() verwenden, um Nachrichten an Service Worker zu senden. Der Service Worker kann optional eine Antwort über Client.postMessage() an die kontrollierte Seite senden.

Dieses Ereignis ist nicht abbrückbar und wird nicht weitergegeben.

Syntax

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

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

onmessage = (event) => { }

Ereignistyp

Ein ExtendableMessageEvent. Erbt von ExtendableEvent.

Ereigniseigenschaften

Erbt Eigenschaften von seinem Elternteil, ExtendableEvent.

ExtendableMessageEvent.data Schreibgeschützt: Gibt die Daten des Ereignisses zurück. Dies kann ein beliebiger Datentyp sein. Wenn im messageerror-Ereignis gesendet, wird die Eigenschaft null sein.
ExtendableMessageEvent.origin Schreibgeschützt: Gibt den Ursprung des Client zurück, der die Nachricht gesendet hat.
ExtendableMessageEvent.lastEventId Schreibgeschützt: Repräsentiert bei serverseitigen Ereignissen die letzte Ereignis-ID der Ereignisquelle.
ExtendableMessageEvent.source Schreibgeschützt: Gibt eine Referenz auf das Client-Objekt zurück, das die Nachricht gesendet hat.
ExtendableMessageEvent.ports Schreibgeschützt: Gibt das Array zurück, das die MessagePort-Objekte enthält, die die Ports des zugehörigen Nachrichtenkanals darstellen.

Beispiele

Im untenstehenden Beispiel erhält eine Seite einen Zugriff auf das ServiceWorker-Objekt über ServiceWorkerRegistration.active und ruft dann dessen postMessage()-Funktion auf.

// main.js
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event is a MessageEvent object
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}

Der Service Worker kann die Nachricht durch Abhören des message-Ereignisses empfangen:

// service-worker.js
addEventListener("message", (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});

Alternativ kann das Skript die Nachricht mit onmessage empfangen:

// service-worker.js
self.onmessage = (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
};

Spezifikationen

Specification
Service Workers # eventdef-serviceworkerglobalscope-message
Service Workers # dom-serviceworkerglobalscope-onmessage