W3cubDocs

/Web APIs

ExtendableMessageEvent

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.

Event ExtendableEvent ExtendableMessageEvent

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.

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. This is an empty string.

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.

js

// 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:

js

// 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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ExtendableMessageEvent 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0
ExtendableMessageEvent 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0
data 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0
lastEventId 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0
origin 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0
ports 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0
source 51 17 44 No 38 11.1 51 51 44 41 11.3 5.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ExtendableMessageEvent