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

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

• 1の例 と違って、オンライン中はサーバーからファイルを取得し、オフラインの時だけキャッシュを使います。
• postMessage() を使用して 1の例よりも「閲覧中のブラウザの状況」に表示される内容を多めにしています。

画像のキャッシュの確認

ページのキャッシュの確認

→次のページへ

閲覧中のブラウザの状況

この例の Service Worker のソースコード

service-worker.js