このサービスワーカーの設定の場合、ファイルキャッシュはどのように扱われどのようなときに再読み込みされますか

service-worker.txt

more_vert

こんにちは！ご質問ありがとうございます。 提供された service-worker.js のファイルキャッシュの扱いと、再読み込みのタイミングについて解説しますね。

キャッシュの仕組み（キャッシュ戦略）

このサービスワーカーは「キャッシュファースト（Cache First）」または「キャッシュ、ネットワークにフォールバック（Cache, falling back to network）」と呼ばれる非常に一般的な戦略を採用しています。

これは、以下のように動作します。

1. リクエスト発生: ブラウザがページを表示するためにファイル（例: app.js, style.css）をリクエストします。
2. キャッシュ確認: サービスワーカーはそのリクエストを検知し、まず自身の持っているキャッシュストレージ内に、リクエストされたファイルが存在するかどうかを確認します (caches.match(event.request))。
3. 応答:
   • キャッシュに存在する場合: ネットワークにアクセスすることなく、即座にキャッシュ内のファイルを返します。これにより、2回目以降のアクセスが非常に高速になり、オフラインでもアプリケーションが動作します。
   • キャッシュに存在しない場合: 通常通りネットワークにリクエストを送り (fetch(event.request))、取得したファイルをブラウザに返します。

キャッシュされるファイルとタイミング

キャッシュは、サービスワーカーがブラウザに初めてインストールされるとき (install イベント) に作成されます。 service-worker.js 内の FILES 配列にリストされている以下のファイルが、このタイミングで一括でダウンロードされ、キャッシュに保存されます。

const FILES = [
  '/',
  '/index.html',
  '/app.js',
  '/manifest.json',
  '<https://cdnjs.cloudflare.com/ajax/libs/marked/16.1.1/lib/marked.umd.js>',
  '/css/style.css',
  '/js/saveControls.js',
  '/icon/image.png'
];

キャッシュの再読み込み（更新）タイミング

ここが最も重要なポイントです。 この設定では、一度キャッシュされたファイルは、service-worker.js ファイル自体が更新されるまで、再読み込みされません。

つまり、例えば app.js や css/style.css の中身を修正してサーバーにアップロードしただけでは、すでにサイトを訪れたことのあるユーザーのブラウザは、キャッシュにある古いファイルを使い続けてしまいます。

キャッシュを正しく更新するための手順は以下の通りです:

1. app.js や style.css など、キャッシュ対象のファイルを修正します。
2. service-worker.js ファイルを修正します。 最も簡単で一般的な方法は、CACHE_NAME のバージョン番号を更新することです。
   • 変更前: const CACHE_NAME = 'markdownTTS-cache-v1';
   • 変更後: const CACHE_NAME = 'markdownTTS-cache-v2';
3. 修正したすべてのファイルをサーバーにアップロードします。