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.
Bubbles | No |
---|---|
Cancelable | No |
Interface | ExtendableMessageEvent |
Event handler property | onmessage |
Examples
In the below example a page gets a handle to the ServiceWorker
object via ServiceWorkerRegistration.active
, and then calls its postMessage()
function.
// 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:
// 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 | |
message_event |
40 |
≤79 |
44
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
|
No |
24 |
11.1 |
40 |
40 |
44 |
24 |
11.3 |
4.0 |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event