web api event
ServiceWorkerGlobalScope: message event
Secure contextAvailable in workers
The message event of the ServiceWorkerGlobalScope interface occurs when incoming messages are received. Controlled pages can use the postMessage() method to send messages to service workers.
The service worker can optionally send a response back via the postMessage(), corresponding to the controlled page.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("message", (event) => { })
onmessage = (event) => { }
Event type
An ExtendableMessageEvent. Inherits from ExtendableEvent.
Examples
In the below example a page gets a handle to the ServiceWorker object via active, and then calls its postMessage() function.
// 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");
});
}
The service worker can receive the message by listening to the message event:
// 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");
});
Alternatively, the script can listen for the message using onmessage:
// 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");
};