Describes how to send messages between a page's main thread and a service worker thread

Service_Workers_Messaging.md

Page to ServiceWorker

// in page.html
navigator.serviceWorker.controller.postMessage({'hello':'world'});

// in sw.js
self.addEventListener('message', event => { 
  console.log(event.data); // outputs {'hello':'world'}
});

ServiceWorker broadcast to all connected Pages

// in sw.js

this.clients.matchAll().then(clients => {
  clients.forEach(client => {
    client.postMessage('Broadcast to all clients !');
  )}
});

// in page.html

window.addEventListener('message', event => { console.log(event) }, false);

Private communication

// in page.html

const messageChannel = new MessageChannel();

// Listen for messages from service worker
messageChannel.port1.onmessage = (event) => {
  console.log('main thread received a new message', event.data);
}

// Send message to service worker
navigator.serviceWorker.controller.postMessage({message: 'something'}, [messageChannel.port2]);

// in sw.js

// Listen for messages from service worker
this.addEventListener('message', event => {
  console.log('worker received a new message:', event.data)
  
  // Reply to message
  event.ports[0].postMessage('private msg back');
});