Может быть, это потому, что я начинающий программист, который ищет не там, где надо, но мне было очень трудно найти простой пример, использующий сервис-воркеры с 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 (я не уверен, есть ли лучший способ получить объект окна клиента. )
Спасибо за чтение, я надеюсь, что это поможет кому-то.