ServiceWorkerメモ

使用する場合の前提条件

HTTPSもしくはlocalhost

ServiceWorkerのバージョンアップ

ServiceWorkerとして登録されているファイルに変更があっても、即時適用されるわけではない。

ファイル変更を検知すると、installイベントが発火される。install完了し、開かれているページが全て閉じられた後再度訪問した際に新バージョンでのactivateイベントが発火される。

ライフサイクル

[Installing] → [Error]
  ↓
[Activated]
  ↓
[Idle] ↔ [Terminated]
  ↕
[Fetch/Message]

多分こう

  • Installing: サービスワーカーに新規ファイルを登録、登録ファイルの変更が検知された際に発火
  • Activated: ファイルの登録、変更があった後、ページが開き直された際に発火
  • Idle: ページが開いていて、イベント待ちの状態
  • Terminated: 関連するページが全て閉じられた状態
  • Fetch/Message: そのまんま

イベント

  • install
  • activete
  • message
  • fetch
  • push
  • sync

よくわからない点

オンライン時はサーバーから、オフライン時はキャッシュから表示という挙動をさせる方法

一般的にイメージする「オンライン時はサーバーからファイルを取得、オフライン時にはキャッシュされたデータを読む」という挙動をしたい場合は、fetchイベントにて通信状況を判断して挙動を調整する必要がある。

通信状況を確認する場合は、navigator.onLineを使用するのが普通みたいだが、ページの初期ロード時のfetchタイミングではネットワークに繋がっている場合でもnavigator.onLinefalseになっている。

なので、初期ロード時の読み込みファイルは全てSWのキャッシュから提供されることになり、ネットワークにつながっているのにサーバーから最新ファイルを取得出来ないという状況になってしまう。

これに関しては、対策とかあるはずなので要調査。

install/activateが発生する条件

記事を読んだ感じだと、install/activateはServiceWorkerに登録したファイルの変更を検知した際&変更検知後にページを開き直した際な感じの書き方だった。

ただ、実際に試すとページを開き直すと毎回install/activateが発生していた。(Chrome71)