Webアプリケーションをオフラインでも動作させるようにするには、Webアプリケーションの構成要素であるすべてのリソース(HTML/CSS/JavaScript)をローカルにキャッシュしておき、ネットワークに接続していない状態でもそれらのキャッシュを利用してアプリケーションを実行できるようにする必要がある。そのための仕組みがアプリケーションキャッシュだ。

アプリケーションキャッシュは、「キャッシュマニフェスト」というファイルで管理される。キャッシュマニフェストは、キャッシュするリソースを列挙することが主目的の、単純なテキストファイルだ。マニフェストファイルをブラウザに読み込ませるためには、html要素が持つ「manifest」属性にマニフェストファイルのURLを指定する。

たとえば、hello.htmlとhello.jsという2つのファイルをキャッシュするには、まず以下のようなマニフェストを記述して、hello.manifestという名前で保存する。 

CACHE MANIFEST
hello.html
hello.js

そして、マニフェストファイルのURLをhtmlタグのmanifest属性に指定するだけだ。

<html manifest="hello.manifest">
...
</html>

基本的にはたったこれだけで、リソースのキャッシュを実現できる。キャッシュの内容に変更があった場合は、マニフェストファイルを1バイトでも書き換えれば、ブラウザは更新を検知してキャッシュのダウンロードとキャッシュをやり直す。

以下に示すサンプルは、キャッシュの更新チェックを明示的に行い、更新があったらユーザに通知してアプリケーションをリロードするというものだ。Webアプリケーションの「自動アップデート」を簡易的に実現しているといってよいだろう。このサンプルは、Firefox3.5/Safari4/Chrome3での動作を確認してある。

マニフェスト変更前の表示画面

マニフェストファイルを変更すると以下のダイアログが表示され、「OK」を押すと画面がリロードされる。

変更確認画面

マニフェスト変更後の表示画面