JavaScript サンプル: 静的HTMLページのオフライン化 (Service Worker の単純な例)

Service Worker を使用して、静的HTML、CSS、JS、画像ファイルをキャッシュしてオフラインでも閲覧できるようにします。

このページを読み込んだ後に、インターネット接続を切ってオフラインにして、ページを再読み込みしてみてください。(キャッシュによってページが表示できるはずです)
iOS の場合、キャッシュは50MBを超えないようにする必要があります。
この例の場合、キャッシュを更新したい場合は下記のようにしてください。
- Service Worker (この例では service-worker.js) の内容 (キャッシュ名など) を更新する (Service Worker の内容が変わっていた場合、ブラウザは Service Worker を install し直すようになります)
- このページを開いているすべてのタブを閉じる
- ページを開き直す (必要であれば再読み込みする。ブラウザは新しい Service Worker を activate します)

画像のキャッシュの確認