Service Worker のインストール・アクティベート処理のフローメモ

• [main] serviceWorker.register('sw.js') でインストールされる
• [worker] install イベントが発生し、インストールする Service Worker をアクティベートして良いか確認処理が行われる
  • 古い Service Worker が存在する場合、そのコントロール配下の Web ページが開かれていないか。古い Service Worker のコントロール化にある Web ページが開かれている場合、リロードしてもアクティベートされない
  • この確認処理をスキップし、強制的にアクティベートするには e.skipWaiting() を実行する
• [worker] activate イベントが発生し、インストールした Service Worker がアクティブになっても良い状態になる。このとき、対象の Web ページはコントロール配下にない
• [main] serviceWorker.ready が resolve される
• 通常 Service Worker をアクティベートしても、Web ページは即座にコントロール配下にならない
  • [main] 次回以降 Web ページへアクセスするとアクティベートした Service Worker が動作する
  • [worker] アクティベートした Service Worker に即座に Web ページをコントロールさせるには、 self.clients.claim() を実行する
• [main] Web ページをコントロールする Service Worker が存在する場合、 serviceWorker.controller プロパティを通して参照できる
  • このプロパティの状態変化は controllerchange というイベントを navigator.serviceWorker.addEventListener() で監視することでハンドルできる