ServiceWorkerGlobalScope: message event

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");

  if (event.waitUntil) {
    event.waitUntil(promise);
  }
});

Specifications

Browser compatibility

See also

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