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


In the below example a page gets a handle to the ServiceWorker object via, and then calls its postMessage() function.

// in the page being controlled
if (navigator.serviceWorker) {


  navigator.serviceWorker.addEventListener('message', event => {
    // event is a MessageEvent object
    console.log(`The service worker sent me a message: ${}`);

  navigator.serviceWorker.ready.then( registration => {"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.source.postMessage("Hi client");


Service Workers 1
# eventdef-serviceworkerglobalscope-message

Browser compatibility

BCD tables only load in the browser

See also