Themessage event is used in a page controlled by a service worker to receive messages from the service worker.

This event is not cancelable and does not bubble.

Syntax

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

addEventListener("message", (event) => { })onmessage = (event) => { }

Event type

AMessageEvent. Inherits fromEvent.

Event properties

This interface also inherits properties from its parent,Event.

MessageEvent.dataRead only

The data sent by the message emitter.

MessageEvent.originRead only

A string representing the origin of the message emitter.

MessageEvent.lastEventIdRead only

A string representing a unique ID for the event.

MessageEvent.sourceRead only

AMessageEventSource (which can be aWindowProxy,MessagePort, orServiceWorker object) representing the message emitter.

MessageEvent.portsRead only

An array ofMessagePort objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g., in channel messaging or when sending a message to a shared worker).

Examples

In this example the service worker get the client's ID from afetch event and then sends it a message usingClient.postMessage:

// service-worker.jsasync function messageClient(clientId) {  const client = await clients.get(clientId);  client.postMessage("Hi client!");}addEventListener("fetch", (event) => {  messageClient(event.clientId);  event.respondWith(() => {    // …  });});

The client can receive the message by listening to themessage event:

// main.jsnavigator.serviceWorker.addEventListener("message", (message) => {  console.log(message);});

Alternatively, the client can receive the message with theonmessage event handler:

// main.jsnavigator.serviceWorker.onmessage = (message) => {  console.log(message);};

Specifications

Browser compatibility

See also

• Using Service Workers
• Service workers basic code example
• Using web workers