message (Web Workers)

The message event of the Service Worker API is fired when a message is received from a service worker (ServiceWorkerMessageEvent), or a message is received in a service worker from another context (ExtendableMessageEvent.)

Examples

When the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a ServiceWorkerMessageEvent.

navigator.serviceWorker.ready.then(function(reg) {  

  ...

      // set up a message channel to communicate with the SW
      var channel = new MessageChannel();
      channel.port1.onmessage = function(e) {
        console.log(e);
        handleChannelMessage(e.data);
      }
      
      mySW = reg.active;
      mySW.postMessage('hello', [channel.port2]);
  });

Inheritance

When fired on a ServiceWorkerContainer object, the message event implements the ServiceworkerMessageEvent interface, which inherits from the Event interface — it therefore has available the properties and methods defined on both interfaces.

When fired on a ServiceWorkerGlobalScope object, the message event implements the ExtendableMessageEvent interface, which inherits from the ExtendableEvent interface — it therefore has available the properties and methods defined on both interfaces.

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

See also

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