Service Workerのせいで古い内容が表示され続けるときの対処

Service Workerとは何をしているのか

Service Worker(SW)は、ページとネットワークの間で動く常駐スクリプトです。一度登録されると、ページを閉じても残り、リクエストを横取りしてキャッシュから応答できます。オフライン対応や高速表示のために使われます。

便利な反面、SWがキャッシュした古いHTMLやJS・CSSを返し続けると、サーバ側のファイルを差し替えても画面に反映されない、という現象が起きます。リロードしても直らないのが厄介な点です。

PWAテンプレートやフレームワークの生成物には、最初からSWが組み込まれていることがあります。意図せず登録されているケースを疑うことが第一歩です。

古い内容が残る典型パターン

SWがあるのに更新戦略が「キャッシュ優先」になっていると、新しいファイルを取りに行く前にキャッシュを返してしまいます。結果、何度リロードしても古い表示が続きます。

通常のリロード(F5)ではSW自体は更新されにくく、ブラウザのタブをすべて閉じるまで古いSWが居座ることもあります。これが「自分の環境だけ直らない」混乱を生みます。

強制リロード(スーパーリロード)で一時的に直っても、SWの登録が残っていれば次回また古いキャッシュが返るため、根本対処にはなりません。

症状別チェック表

Service Workerのせいで古い内容が表示され続けるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

確実にリセットする手順

SWが原因かどうかを確認し、登録を解除すれば確実に最新を表示できます。開発者ツールから操作します。

1. 開発者ツールを開き、Applicationタブの Service Workers を表示する
2. 対象オリジンに登録されたSWがあるか確認する
3. 「Update on reload」にチェックを入れるか「Unregister」で登録を解除する
4. 同じくApplicationタブの Storage から該当キャッシュ(Cache Storage)を削除する
5. タブを一度すべて閉じてから開き直し、最新が表示されるか確認する
6. 再発する場合は、SWの更新戦略を network-first などに見直す

そもそもSWを入れるべきかの判断

頻繁に中身を差し替える確認・レビュー用のページでは、SWのキャッシュは更新事故の原因になりやすく、メリットよりデメリットが上回ることがあります。オフライン対応が必須でないなら、SWを外す選択も現実的です。

どうしてもSWを使う場合は、HTMLはキャッシュせずネットワーク優先にする、バージョン番号でキャッシュ名を切り替えるなど、更新が確実に届く設計にしておくと事故が減ります。

「自分では更新したのに相手に届かない」という相談の多くは、相手側に残った古いSWが原因です。配布前にSWの有無を点検しておくと安心です。

確認共有の場面での回避

ギガサイト便は同じURLのままファイルを差し替えられるため、リンクを送り直さずに中身だけ更新できます。ただし相手のブラウザにSWが残っていると、URLが同じでも古い表示が返る可能性があります。共有するHTMLにSWが含まれていないかを事前に確認しておくのが確実です。

更新が反映されないと相手から言われたら、まずSWの登録解除とキャッシュ削除を案内すると切り分けが早く進みます。アクセスログでいつ閲覧されたかを確認すれば、差し替え前後どちらを見ているかの推測にも役立ちます。