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: Dieses Feature ist nur verfügbar in Service Workers.
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.
addEventListener("message", (event) => {});
onmessage = (event) => {};
Ereignistyp
Ein ExtendableMessageEvent
. Erbt von ExtendableEvent
.
Ereigniseigenschaften
Erbt Eigenschaften von seinem Elternteil, ExtendableEvent
.
ExtendableMessageEvent.data
Nur lesbar-
Gibt die Daten des Ereignisses zurück. Es kann sich um jeden Datentyp handeln. Wird es im
messageerror
-Ereignis ausgelöst, wird die Eigenschaftnull
sein. ExtendableMessageEvent.origin
Nur lesbar-
Gibt den Ursprung des
Client
zurück, der die Nachricht gesendet hat. ExtendableMessageEvent.lastEventId
Nur lesbar-
Repräsentiert bei serverseitig gesendeten Ereignissen die letzte Ereignis-ID der Ereignisquelle.
ExtendableMessageEvent.source
Nur lesbar-
Gibt eine Referenz zum
Client
-Objekt zurück, das die Nachricht gesendet hat. ExtendableMessageEvent.ports
Nur lesbar-
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.
// 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:
// 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:
// 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