ServiceWorkerContainer: message-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2018 browserübergreifend verfügbar.
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, die von einem Service Worker gesteuert wird, verwendet, um Nachrichten vom Service Worker zu empfangen.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht an übergeordnete Elemente weitergegeben.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("message", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onmessage = (event) => { }
Ereignistyp
Ein MessageEvent. Erbt von Event.
Beispiele
In diesem Beispiel ruft der Service Worker die ID des Clients aus einem fetch-Ereignis ab und sendet ihm anschließend mit Client.postMessage eine Nachricht:
// 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 auf das message-Ereignis lauscht:
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
console.log(message);
});
Alternativ kann der Client die Nachricht mit dem onmessage-Event-Handler empfangen. Beachten Sie jedoch, dass dadurch andere mit onmessage hinzugefügte Event-Listener ersetzt werden, sofern vorhanden:
// main.js
navigator.serviceWorker.onmessage = (message) => {
console.log(message);
};
Spezifikationen
| Spezifikation |
|---|
| Service Workers Nightly # dom-serviceworkercontainer-onmessage |