Может быть, это потому, что я начинающий программист, который ищет не там, где надо, но мне было очень трудно найти простой пример, использующий сервис-воркеры с postMessage, чтобы я мог научиться использовать их в своем собственном проекте. Мне понадобился postMessage, потому что я хотел использовать функцию фоновой синхронизации сервис-воркеров, а затем повторно визуализировать свой DOM (в данном случае только html), когда мои сервис-воркеры закончили фоновую синхронизацию. Однако сервис-воркеры не могут напрямую взаимодействовать с DOM, поэтому нам нужно использовать что-то вроде postMessage для взаимодействия с javascript на стороне клиента. Этот javascript может использовать эту информацию для обновления DOM. После поиска в течение пары часов я наконец наткнулся на этот пример: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event, где я смог получить postMessage работающий.

Чтобы настроить postMessage с сервис-воркерами, вам нужно будет создать main.js, service-worker.js и index.html в корне вашего проекта.

Этот код входит в ваш main.js:

// paste the below code in your main.js
// 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");
  });

}

Это входит в ваш service-worker.js:

// 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");
});

Ваш основной будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hi
<script src= "main.js"></script>
</body>
</html>

Вы хотите запустить этот код с открытыми инструментами разработчика Chrome. Этого можно добиться, щелкнув правой кнопкой мыши и выбрав опцию inspect. Вы должны увидеть сообщения console.log, что означает, что postMessage работает.

В моем случае я хотел повторно отобразить DOM после фоновой синхронизации. В конце моей фоновой синхронизации в моем service-worker.js происходит событие. Я использовал postMessage, чтобы отправить сообщение для отображения моего списка DOM. Вот как будет выглядеть код:

сервис-воркер.js:

var client;
addEventListener('message', event => {
   client = event.source;
});
/*
sync code
.........
*/
//.........
//end of background sync
someArbitraryEventThatOccursAtEndOfSync.oncomplete = event => {
   client.postMessage("renderList");
}

основной.js:

if (navigator.serviceWorker){
      window.addEventListener('load', ()=> {
      navigator.serviceWorker.register('/service-worker.js').then(() => {
      return navigator.serviceWorker.ready
      }).then(reg => {
      //sending postMessage to client in service-worker.js
         reg.active.postMessage("Hi service worker");
      })
   })
   navigator.serviceWorker.addEventListener('message', event => {
   // event is a MessageEvent object
      if (event.data === "renderList"){
         getAllEntries(db, data => {
      if (data.length) renderList(data)
      })
      }
   });
}
//more code below doing other things

Сначала мы публикуем сообщение из main.js, чтобы определить клиента в service-worker.js. Мы собираемся использовать клиент для создания сообщений postMessages в конце наших событий. Когда происходит окончание фоновой синхронизации, main.js получает postMessage renderList, который использует пользовательские функции, которые я создал для обновления списка для моей модели DOM (я не уверен, есть ли лучший способ получить объект окна клиента. )

Спасибо за чтение, я надеюсь, что это поможет кому-то.