ServiceWorkerContainer: message event

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

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

See also

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Using web workers