ServiceWorkerContainer: message-Event
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-Event wird in einer Seite verwendet, die von einem Service Worker kontrolliert wird, um Nachrichten vom Service Worker zu empfangen.
Dieses Ereignis ist nicht abbrechbar und wird nicht gebubbelt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("message", (event) => { })
onmessage = (event) => { }
Ereignistyp
Ein MessageEvent. Erbt von Event.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.
MessageEvent.dataSchreibgeschützt-
Die vom Nachrichten-Emitter gesendeten Daten.
MessageEvent.originSchreibgeschützt-
Ein String, der die Herkunft des Nachrichten-Emitters darstellt.
MessageEvent.lastEventIdSchreibgeschützt-
Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.sourceSchreibgeschützt-
Eine
MessageEventSource(die ein WindowProxy,MessagePortoderServiceWorkerObjekt sein kann) darstellt den Nachrichten-Emitter. MessageEvent.portsSchreibgeschützt-
Ein Array von
MessagePortObjekten, die die Ports darstellen, die mit dem Kanal verbunden sind, über den die Nachricht gesendet wird (soweit zutreffend, z. B. bei Kanalnachrichten oder beim Senden einer Nachricht an einen geteilten Worker).
Beispiele
In diesem Beispiel erhält der Service Worker die Client-ID von einem fetch Ereignis und sendet 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-Event abhört:
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
console.log(message);
});
Alternativ kann der Client die Nachricht mit dem onmessage-Event-Handler empfangen:
// main.js
navigator.serviceWorker.onmessage = (message) => {
console.log(message);
};
Spezifikationen
| Specification |
|---|
| Service Workers # dom-serviceworkercontainer-onmessage |
Browser-Kompatibilität
Loading…