Проблема в том, что предоставленный вами код определяет только получение и отправку сообщений от вашего клиента сервисному работнику.
Приведенный ниже метод определил сообщение для отправки вашему контроллеру (активному) работнику службы.
onClickHandler = () => {
console.log('on click', 'posting skipWaiting');
navigator.serviceWorker.controller.postMessage('skipWaiting');
};
В приведенном ниже определении добавлен прослушиватель событий в ваш контейнер ServiceWorker для получения любых сообщений, отправленных работником службы.
navigator.serviceWorker.addEventListener('message', event => {
console.log('skip waiting');
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});
Теперь вам нужно определить обработчики событий из файла рабочего сервиса для получения и отправки сообщений.
В файле рабочего сервиса для получения сообщений от клиента:
self.addEventListener('message', function handler (event) {
console.log('skip waiting');
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});
Чтобы отправить сообщения от serviceworker вашему клиенту:
self.addEventListener('fetch', function(event) {
self.clients.matchAll().then(all => all.map(client => client.postMessage('data from webworker')));
});
Вы также можете отправить данные обратно из сервисного центра, используя MessageChannel. На вашем клиенте вы должны определить что-то вроде ниже:
navigator.serviceWorker
.register(swUrl)
.then(registration => {
var messageChannel = new MessageChannel();
// listener for messages from the ServiceWorker
messageChannel.port1.addEventListener('message', (event) => console.log(event.data));
function sendMessage (message) {
//send message to the active service worker
navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
}
onClickHandler = () => {
sendMessage('skipWaiting');
};
});
Мне показалось, что приведенная ниже статья весьма полезна.
ServiceWorker, MessageChannel и postMessage от Николас Беваква