MessageChannelを使わずにService WorkerとpostMessageをしよう
Service Workerのテストを書こうとしてメッセージのやりとりにMessageChannelを使おうとしていたところ、同僚氏からこんなことを教えてもらったので備忘録代わりにメモ。
いくつか方法があるから分かりにくいですよね。ExtendableMessageEvent.source を知らずに、わざわざ別途 MessagePort を渡して通信してるのをたまに見る気がする
— nhiroki (@nhiroki_) November 8, 2018
まさにコレだった・・・・
page.html
<script>
self.onload = async () => {
const controller = navigator.serviceWorker.controller;
if (!controller) {
console.log('no controller.');
console.log('registering...');
await navigator.serviceWorker.register('sw.js');
console.log('registered. waiting for activation.');
await navigator.serviceWorker.ready;
console.log('ready. please reload the page.');
return;
}
navigator.serviceWorker.addEventListener('message', e => {
console.log(`received: ${e.data}`);
});
navigator.serviceWorker.controller.postMessage('hoge!');
console.log('sent: hoge!');
}
</script>
sw.js
let x = 0;
self.addEventListener('message', e => {
console.log(`sw onmessage: ${e.data}`);
e.source.postMessage(`${++x}`);
});
簡単!