How do you manipulate DOM using a service worker

// Service Worker does NOT have direct access to 'window' or 'document' DOM.
// Communication must happen via PostMessage:

// In Service Worker (sw.js)
self.addEventListener('push', (event) => {
  self.clients.matchAll().then((clients) => {
    clients.forEach((client) => {
      client.postMessage({ type: 'NEW_NOTIFICATION', payload: 'New Message!' });
    });
  });
});

// In Web Page (main.js)
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'NEW_NOTIFICATION') {
    document.getElementById('badge').textContent = event.data.payload; // Updates DOM!
  }
});