2019-2-2

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.onLineはfalseになっている。

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

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

install/activate が発生する条件

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

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