HTMLアプリケーションキャッシュで単一URLの複数バージョンを管理する方法

HTML5のApplication Cache（AppCache）のマニフェストファイルでは、同じURLに対して異なるバージョンのファイルをキャッシュしたいというケースがあります。しかし、そのままでは古いキャッシュが残り、更新が反映されない問題が発生しがちです。ここでは、タイムスタンプを活用した確実な解決策を紹介します。

遠い未来の有効期限を設定する

まず、マニフェストのCACHEセクションに記載されたすべてのリソースには、遠い未来の日付（far-future expiration）を指定する必要があります。これにより、ブラウザがキャッシュ済みのファイルを即座に破棄せず、安定して保持できるようになります。

ファイル名にタイムスタンプを付加する

次に、CACHEセクション内の各ファイル名に、更新日時をもとにしたタイムスタンプをサフィックスとして追加します。

CACHE:
menu_1355817388000.js
toolbar_1355817389100.js

このようにすることで、ファイルの中身が更新されるたびに別のURLとして扱われ、ブラウザは必ず新しいファイルを取得するようになります。

ファイル更新時の手順

サーバー上のファイルに変更があった場合は、次の手順に従います。

1. 変更対象のファイル名のタイムスタンプ部分を、新しい値に書き換えます。
2. マニフェストファイル自体も必ず更新してください。マニフェストの内容が変化しない限り、ブラウザはそれを再ダウンロードしません。
3. ユーザーが次にページへアクセスした際、タイムスタンプが更新されたファイルが自動的にダウンロードされ、キャッシュが差し替えられます。

まとめ

「遠い未来の有効期限＋タイムスタンプ付きファイル名」の組み合わせにより、単一のリソースでも複数バージョンを確実にキャッシュ管理でき、古いキャッシュが残るトラブルを防げます。オフライン対応アプリケーションや静的アセットの配信において、非常に有効なテクニックです。