monolithic kernel

iPhoneでHTML5のアプリケーションキャッシュを利用する

HTML5で追加されたアプリケーションキャッシュを利用すると、Web上のコンテンツをキャッシュしてオフライン状態でも利用できるようになります。

デモ

以下のWebページにアクセスした後、機内モードに切り替えるなどしてオフラインにした状態で再度アクセスしてみてください。リロードが正常に行えること、ページ内の表示がonlineからofflineに切り替わっていることが確認できます。

また、IEなどのアプリケーションキャッシュに対応していないブラウザでページを開いた場合はメッセージが表示されます。

ApplicationCache

マニフェストファイル

キャッシュするファイルはマニフェストファイルで指定します。マニフェストファイルの拡張子は.manifestとしてください。1行目にはCACHE MANIFESTで固定、2行目以降にキャッシュしたいファイルのパスを1行に1つずつ記述します。また、#ではじまる行は無視されます。

CACHE MANIFEST
# version 1.0
index.html

コンテンツはこのマニフェストファイルの内容が変化しない限り永続的にキャッシュされます。この挙動、キャッシュしたいファイルが増減した場合は特に問題ありませんが、ファイル構成はそのままで中身だけを書き換えた場合にはキャッシュされ続けてしまうため不便です。キャッシュを更新させるためには、マニフェストファイルが1バイトでも変更されればよいため、上記の例のようにバージョンや日付をコメントとして記述しておくことが多いようです。

HTML

html要素のmanifest属性として先ほど作成したマニフェストファイルを指定します。

<html manifest="cache.manifest">

JavaScript

キャッシュ対象のファイルが最新の状態に更新されるとupdatereadyイベントが発生するため、そこでswapCacheメソッドを呼び出してキャッシュを最新のバージョンに入れ替えます。

applicationCache.addEventListener('updateready', function() {
  applicationCache.swapCache();
}, false);

Webサーバ

マニフェストファイルのContent-Typeはtext/cache-manifestである必要があります。

Apache2であれば以下のような設定を追加します。

AddType text/cache-manifest .manifest

Nginxの場合はこちら。

location ~ \.manifest$ {
  add_header Content-Type text/cache-manifest;
}

参考

追記

  • 2011/05/08
    • shinout氏からのご指摘に基づいてJavaScriptを修正