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}`);
});

簡単！