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 ServiceWorker.postMessage()-Methode verwenden, um Nachrichten an Service Worker zu senden. Der Service Worker kann optional über die Client.postMessage() eine Antwort an die kontrollierte Seite zurücksenden.

Dieses Ereignis kann nicht abgebrochen werden und erfolgt nicht in einem Ereignis-Bubble.

Syntax

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

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

onmessage = (event) => {};

Ereignistyp

Ein ExtendableMessageEvent. Erbt von ExtendableEvent.

Event ExtendableEvent ExtendableMessageEvent

Ereigniseigenschaften

Erbt Eigenschaften von seinem Elternteil, ExtendableEvent.

ExtendableMessageEvent.data Schreibgeschützt

Gibt die Daten des Ereignisses zurück. Es kann sich um jeden Datentyp handeln. Wird es im messageerror-Ereignis ausgelöst, 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 serverseitig gesendeten Ereignissen die letzte Ereignis-ID der Ereignisquelle.

ExtendableMessageEvent.source Schreibgeschützt

Gibt eine Referenz zum 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 folgenden Beispiel erhält eine Seite Zugriff auf das ServiceWorker-Objekt über ServiceWorkerRegistration.active und ruft dann dessen postMessage()-Funktion auf.

js
// 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 empfangen, indem er das message-Ereignis abhört:

js
// 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 mithilfe von onmessage abhören:

js
// 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch