Service Worker <-> メインスクリプト

サービスワーカスクリプトからメインスレッドへ

メインスレッドからサービスワーカスクリプトへ

こんなことをしたい場合はメッセージというものを使います

まず、メインのところからService workerへメッセージを飛ばす方法です

navigator.serviceWorker.ready.then( registration => {
  registration.active.postMessage('<メッセージ>だよ');
});

はい、このようにします。(わかると思うけど

'<メッセージ>だよ'

のところは適宣置き換えてください)

逆に受け取るときは、

navigator.serviceWorker.addEventListener('message', event => {
  // event は MessageEvent オブジェクトらしいです
  console.log(`メッセージ: ${event.data}`);
});

serviceWorkerのmessageイベントで送られてきたメッセージを取得できます

お待たせメイン >- serviceWorkerの受信はmessageイベントで行います。

送るのは返信みたいにします

self.addEventListener('message', event => {
  // event は ExtendableMessageEvent オブジェクトです
  //らしいです
  console.log(`メッセージを受け取りました: ${event.data}`);

  event.source.postMessage("Hi client");
});

(serviceWorkerから送るのは無理なのかもしれません.だから

main:

navigator.serviceWorker.ready.then( registration => {
  registration.active.postMessage('please-msg');
});

sw:

self.addEventListener('message', event => {
  if (event.data == 'please-msg'){
    event.source.postMessage('msg to client');
  }
});

とするといいかもしれません)

参考: https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerGlobalScope/message_event