ExtendableMessageEvent

Note: This feature is only available in Service Workers.

The ExtendableMessageEvent interface of the Service Worker API represents the event object of a message event fired on a service worker (when a message is received on the ServiceWorkerGlobalScope from another context) — extends the lifetime of such events.

This interface inherits from the ExtendableEvent interface.

Constructor

ExtendableMessageEvent(): Creates a new ExtendableMessageEvent object instance.

Instance properties

Inherits properties from its parent, ExtendableEvent.

ExtendableMessageEvent.data Read only: Returns the event's data. It can be any data type. If dispatched in messageerror event, the property will be null.
ExtendableMessageEvent.origin Read only: Returns the origin of the Client that sent the message.
ExtendableMessageEvent.lastEventId Read only: Represents, in server-sent events, the last event ID of the event source.
ExtendableMessageEvent.source Read only: Returns a reference to the Client object that sent the message.
ExtendableMessageEvent.ports Read only: Returns the array containing the MessagePort 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 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");
});

Specifications

Service Workers Nightly