[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() で監視することでハンドルできる