The message
event of the ServiceWorkerGlobalScope
interface occurs when incoming messages are received. Controlled pages can use the ServiceWorker.postMessage()
method to send messages to service workers. The service worker can optionally send a response back via the Client.postMessage()
, corresponding to the controlled page.
This event is not cancelable and does not bubble.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("message", (event) => {});
onmessage = (event) => {};
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.
In the below example a page gets a handle to the ServiceWorker
object via ServiceWorkerRegistration.active
, and then calls its postMessage()
function.
if (navigator.serviceWorker) {
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.addEventListener("message", (event) => {
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:
addEventListener("message", (event) => {
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
Alternatively, the script can listen for the message using onmessage
:
self.onmessage = (event) => {
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
};