ServiceWorkerGlobalScope: messageerror event

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("messageerror", (event) => {});

onmessageerror = (event) => {};

An ExtendableMessageEvent. Inherits from ExtendableEvent.

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.

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

// main.js
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 listen for the message deserialization error by listening to the messageerror event:

// service-worker.js
self.addEventListener("messageerror", (event) => {
  // event is an ExtendableMessageEvent object
  console.error("Message deserialization failed");
});

Alternatively, the script can listen for the message deserialization error using onmessageerror:

// service-worker.js
self.onmessageerror = (event) => {
  // event is an ExtendableMessageEvent object
  console.error("Message deserialization failed");
};

• message
• ServiceWorker.postMessage()
• Using Service Workers
• Service workers basic code example
• Using web workers