ServiceWorkerGlobalScope: message event

Examples

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

// in the page being controlled
const swPath = 'static/scripts/sw.js';

function handleServiceWorkerActive(registration) {
    if (registration.active) {
        const serviceWorker = registration.active;
        const button = document.querySelector('#worker-message');
        button.addEventListener('click', ()  => {
            serviceWorker.postMessage('Hi service worker');
        });
    }
}

navigator.serviceWorker.register(swPath).then(handleServiceWorkerActive);

The service worker can receive the message by listening to the message event:

// in the service worker
addEventListener('message', (event) => {
    console.log(`The client sent me a message: ${event.data}`);
});

Specifications

Browser compatibility

See also

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Using web workers