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


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) => {
    event.respondWith(() => {
      // ...

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

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


Specification Status
Service Workers
The definition of 'message' in that specification.
Working Draft

Browser compatibility

BCD tables only load in the browser

See also