ServiceWorkerContainer: message event

The message event is used in a page controlled by a service worker to receive messages from the service worker.

Bubbles No
Cancelable No
Interface MessageEvent
Event handler property onmessage

Examples

In this example the service worker get the client's ID from a fetch event and then sends it a message using Client.postMessage:

// in the service worker
async function messageClient(clientId) {
    const client = await clients.get(clientId);
    client.postMessage('Hi client!');
}

addEventListener('fetch', (event) => {
    messageClient(event.clientId);
    event.respondWith(() => {
      // ...
    });
});

The client can receive the message by listening to the message event:

// in the page being controlled
navigator.serviceWorker.addEventListener('message', (message) => {
    console.log(message);
});

Specifications

Browser compatibility

BCD tables only load in the browser

See also