ExtendableMessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2018⁩.

Note: This feature is only available inService Workers.

TheExtendableMessageEvent interface of theService Worker API represents the event object of amessage event fired on a service worker (when a message is received on theServiceWorkerGlobalScope from another context) — extends the lifetime of such events.

This interface inherits from theExtendableEvent interface.

Constructor

ExtendableMessageEvent(): Creates a newExtendableMessageEvent object instance.

Instance properties

Inherits properties from its parent,ExtendableEvent.

ExtendableMessageEvent.dataRead only: Returns the event's data. It can be any data type. If dispatched inmessageerror event, the property will benull.
ExtendableMessageEvent.originRead only: Returns the origin of theClient that sent the message.
ExtendableMessageEvent.lastEventIdRead only: Represents, inserver-sent events, the last event ID of the event source.
ExtendableMessageEvent.sourceRead only: Returns a reference to theClient object that sent the message.
ExtendableMessageEvent.portsRead only: Returns the array containing theMessagePort objects representing the ports of the associated message channel.

Instance methods

Inherits methods from its parent,ExtendableEvent.

Examples

In the below example a page gets a handle to theServiceWorker object viaServiceWorkerRegistration.active, and then calls itspostMessage() function.

// in the page being controlledif (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 themessage event:

// in the service workeraddEventListener("message", (event) => {  // event is an ExtendableMessageEvent object  console.log(`The client sent me a message: ${event.data}`);  event.source.postMessage("Hi client");});