トップページ >  HTML5 >  アプリケーションキャッシュ
初版2011/08/15: 最終更新日2011/08/15
アプリケーションキャッシュ
目次
アプリケーションキャッシュとは
アプリケーションキャッシュの使い方
Application cache API
アプリケーションキャッシュの必要性
アプリケーションキャッシュとは

アプリケーションキャッシュとは、「オフライン機能」とも呼ばれるものです。
正式には「Offline Web Applications」のうちの「Offline Application Caching APIs」を主に指します。
(「Offline Web Applications」には、「Local Strage」や「Web SQL Database」なども含まれますが、ここでは上記に絞って解説します。)

オフラインでもWEBアプリを利用できるようにする機能(API)です。
WEBアプリが使用するリソース(HTML/CSS/スクリプト/画像など)をローカルにキャッシュするための仕組みです。

各ブラウザの対応

アプリケーションキャッシュは、2011年8月現在以下のブラウザで対応しています。
FireFox 3.5~、Safari 4~、Opera 10.6~、Google Chrome 5~
(IEでは10~の予定)

アプリケーションキャッシュの使い方

マニフェストファイルの作成

何をキャッシュするか、オフライン時どのように振る舞うのかを定義したファイルを作ります。
UTF-8のテキストファイルを用意します。
拡張子は「.appcache」とします。
(文献によっては、「.manifest」を使っているものもありますが、windowsのアプリケーションマニフェスト(アプリケーションの特徴付け)にも同じ拡張子が使われます。そのため混同を避ける意味で「.appcache」とします。)
保存場所はWEBアプリケーションのルートとします。,br/>

マニフェストファイルの記述

マニフェストファイルは以下のように記述します。

CACHE MANIFEST
まずはこの一行を先頭に記述し、このファイルがキャッシュのマニフェストファイルであることを宣言します。
CACHE:
キャッシュするファイルを宣言します。
「CACHE:」の一行の後に、1行1ファイルでキャッシュするファイルを記述します。
パスは、相対パスでも絶対パスでも構いません。
CACHE:
index.html
html5_2100.html
/css/style.css
sub-style.css
/js/common.js
wrkr01.js
sample01.jpg
NETWORK:
常にネットワーク上を参照してほしいファイルを宣言します。
オフライン時にはオフラインファイルを利用します。
しかし仕様上「ブラウザがオンラインの場合でも、利用可能な場合はすべてのリクエストをオフラインキャッシュに対して行うように」とあるため、ブラウザによってはオンラインでもキャッシュしたファイルを使用することがあります。
そのため、CGIなどできればネットワーク上のリソースを使ってもらいたい場合、明示的に「NETWORK:」を指定する必要があります。
NETWORK:
http://www.confrage.com/css/style.css
http://www.confrage.com/js/common.js
http://www.confrage.com/js/cgi-bin/
FALLBACK:
代替エントリを宣言します。
エイリアスやリライトしている場合に追加ます。
FALLBACK:
foo/  foo.html
コメント
行中の「#」以降はコメントとして扱われます。
# この行はコメント扱いです。

MIMEタイプの設定

マニフェストファイルをサーバで扱えるようにMIMEタイプを設定します。
そのままでは、キャッシュマニフェストに対応していないのでMIMEタイプを設定する必要があります。
以下は、apacheの場合の設定です。
「httpd.conf」などで設定することも可能ですが、「.htaccess」が使用可能ならばドキュメントルートの「.htaccess」に下記を追記した方が簡単です。

AddType text/cache-manifest .appcache

ページ毎にマニフェストを宣言

マニフェストファイルをページ/WEBアプリケーション毎に宣言したい場合、<html>要素内の「manifest」属性で、マニフェストファイルを宣言します。

<!doctype html>
<html manifest="xxx.appcache">
  :
  :
 省略
  :
  :
</html>

キャッシュの更新

キャッシュを更新させたい場合、マニフェストファイルを更新する必要があります。
マニフェストファイル内にコメントで更新日付などを書き入れることにより、マニフェストファイルのファイル更新日時が変わります。
それを利用してキャッシュを更新させます。

Application cache API

JavaScriptで利用出来るオブジェクトは window.applicationCache です。

メソッド

以下のメソッドを使い更新します。

appCache.update();
アプリケーションキャッシュのダウンロードプロセスを呼び出します。
更新されていない場合はINVALID_STATE_ERR例外となります。
appCache.swapCache();
新しいものがある場合に最新のキャッシュに差し替えます。
ない場合にINVALID_STATE_ERR例外となります。

イベント

アプリケーションキャッシュに関するイベントは以下の通りです。

checking
更新確認中のイベントです。
確認中アイコンなどを表示するのに役立ちます。
noupdate
マニフェストファイルが更新されていない場合のイベントです。
downloading
ローカルへキャッシュ中のイベントです。
ダウンロード中アイコンなどを表示するのに役立ちます。
progress
更新プロセス中のイベントです。
処理中アイコンなどを表示するのに役立ちます。
updateready
キャッシュ更新完了のイベントです。
完了メッセージを表示するのに役立ちます。
cached
キャッシュ成功のイベントです。
成功メッセージを表示するのに役立ちます。
obsolete
マニフェストファイルが404(Not Found)または410(Gone)を返す場合のイベントです。
マニフェストファイルが存在しなかったり、見つからなかったり場合に発生します。
キャッシュは削除されます。
失敗メッセージを表示するのに役立ちます。
error
マニフェストファイルが404(Not Found)または410(Gone)を返してきたか、ダウンロードに失敗した場合のイベントです。
ダウンロード進行中にマニフェストファイルが更新された場合にも発生します。
失敗メッセージを表示するのに役立ちます。

ステータス

更新状態を得るには、window.applicationCache.statusで以下のステータスコードを得ます。

0:UNCACHED
キャッシュされていない
1:IDLE
マニフェストファイルが更新されていない
2:CHECKING
チェック中
3:DOWNLOADING
ローカルにキャッシュ中
4:UPDATEREADY
キャッシュの更新が完了
5:OBSOLETE
マニフェストファイルのダウンロード失敗、キャッシュを無効化
アプリケーションキャッシュの必要性

アプリケーションキャッシュは、まだ途上の仕様です。
全てのブラウザが、2011年8月現在 フル対応しているとは言えません。
(特にIEに関しては、次期バージョン 10まで未対応)
しかし、2011年8月現在 特に必要とされる仕様です。

スマートフォンの台頭

アプリケーションキャッシュを最も必要とし、その威力を発揮するのはスマートフォンです。
そのため、Google ChromeやApple Safariなど、仕様を忠実に実装するよう進めています。
スマートフォンの場合、Wifi下での利用だけでなく、3G回線下で利用します。
通信速度が遅い3G回線下で、ストレスなく利用するためには、キャッシュを有効に利用する必要があります。
また、WEBアプリケーションをスマートフォンのアプリとして利用する場合、不通区間での利用にはキャッシュが必須です。
モバイル使用が前提のスマートフォンには、アプリケーションキャッシュが必須なのです。