ServiceWorkerGlobalScope: message event
The message
event of the ServiceWorkerGlobalScope
interface occurs when incoming messages are received. Controlled pages can use the ServiceWorker.postMessage()
method to send messages to service workers.
The service worker can optionally send a response back via the Client.postMessage()
, corresponding to the controlled page.
Bubbles | No |
---|---|
Cancelable | No |
Interface | ExtendableMessageEvent |
Event handler property | onmessage |
Examples
In the below example a page gets a handle to the ServiceWorker
object via ServiceWorkerRegistration.active
, and then calls its postMessage()
function.
// in the page being controlled
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:
// in the service worker
addEventListener('message', event => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
Specifications
Specification | Status |
---|---|
Service Workers The definition of 'message' in that specification. |
Working Draft |
Browser compatibility
BCD tables only load in the browser