ServiceWorkerGlobalScope: message event
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.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener('message', event => { });
onmessage = event => { };
Event type
An ExtendableMessageEvent
. Inherits from ExtendableEvent
.
Event 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.
Examples
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 receive the message by listening to the message
event:
// service-worker.js
addEventListener('message', event => {
// event is an ExtendableMessageEvent object
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
:
// service-worker.js
self.onmessage = event => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
Specifications
Specification |
---|
Service Workers 1 # eventdef-serviceworkerglobalscope-message |
Browser compatibility
BCD tables only load in the browser