Application Cache
HTML5ではオフラインであってもWebアプリケーションを使えるようにするための仕組みが用意されています。それがApplicationCacheです。
メリット
大きなメリットとしてはオフライン時でも使えるということです。そのWebアプリケーションの画面で使っているリソースをマニフェストファイルに記述しておけばオフラインでも操作ができます。
またキャッシュですので速度面で優位です。リソースへの高速アクセスが可能です。基本的なブラウザのキャッシュとの違いとしてはオフラインアクセスが挙げられるでしょう。
使い方
ApplicationCacheではまず最初のアクセス時にキャッシュを生成します。
その際、まずHTMLタグにマニフェストファイルの設定をします。
...
</html>
このような指定を行うと、Webブラウザは /appcache.mf へアクセスします。このとき、appcache.mfは text/cache-manifest というMIMEタイプでデータを返さなければなりません。
マニフェストファイルの内容
例えば以下のような内容になります。
index.html
stylesheets/application.css
images/example.png
javascripts/application.js
NETWORK:
*
FALLBACK:
*
一行目の CACHE MANIFEST は固定です。その後からオフラインキャッシュするファイルのパスを記述します。10くらいのファイルにしておくのが良いようです。
NETWORKの項目はネットワークが必須な操作のパスになります。FALLBACKはリソースにアクセスできない場合のフォールバックページの指定です。
キャッシュの更新
一度ApplicationCacheに入ってしまうと、画像やJavaScriptなどのリソースが更新されてもキャッシュが更新されません。外部あらキャッシュを更新するためにはマニフェストファイルを更新するか、JavaScriptから更新を行います。
window.applicationCache というオブジェクトが追加されており、こちらを使ってキャッシュのステータスが分かるようになっています。
window.addEventListener('load', function(e) {
// 更新がある場合のイベント
window.applicationCache.addEventListener('updateready', function(e) {
// キャッシュのステータス。UPDATEREADYは更新準備が整った場合
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// swapCacheでアプリケーションキャッシュを更新
window.applicationCache.swapCache();
if (confirm('アプリケーションキャッシュを更新しました。リロードしますか？')) {
window.location.reload();
}
} else {
// 更新がない場合は何もしない
}
}, false);
}, false);
via アプリケーション キャッシュ初心者ガイド - HTML5 Rocks
このコード例を見ても分かる通り、マニフェストファイルの更新を行った場合、一度目のアクセス（更新チェックとダウンロード、更新）と二度目のアクセス（適用後の読み込み）を行う必要があります。
ApplicationCacheのイベント
イベントリスナーは次のように設定されています。
- checking : マニフェストの更新をチェック開始した時。
- noupdate : マニフェストがアップデートされていない場合。
- downloading : ダウンロードが開始した時に呼び出されます。
- progress : 処理中に呼び出します。ファイルの数を返すのでプログレスバーなどを表示するのに使えます。
- cached : キャッシュが終わった場合。
- updateready : キャッシュファイルの更新準備が整った場合。
- obsolete : マニフェストファイルがなくなった場合。アプリケーションキャッシュは削除されます。
- error : マニフェストファイルが見つからない場合。
via HTML Standard
console.log("Cached.");
}, false);
一部のデバイスだけキャッシュを有効にする
JavaScriptでタグを出力すればapplicationCacheを特定の環境でだけ使うようにできます。
<script>
document.write('<html manifest="cache.appcache">');
</script>
<head><title></title></head>
<body></body>
</html>
DOM構築後は使えないので、jQueryなどから使うと言った難しいようです。またはマニフェストファイルを動的に出力するようにして、User Agentから出力を変えるという方法もあります。
注意点
applicationCacheは全体がダウンロードできないと作成、更新されません。特に更新に失敗すると、古いキャッシュを利用しますので注意が必要です。
一部だけキャッシュさせるということはできません。マニフェストファイルに書かれた全ファイルが対象になります。
保存できるファイルサイズは5MBまでになります。
使いどころ
柔軟で使い勝手が良いAPIとは言いがたいので、不特定多数のユーザがアクセスするWebサイトの場合、思ったように動かないケースが多いかと思います。その点、業務系で特定の利用者に限定される場合はオフラインサポートは望まれる要望の一つなのでApplicationCacheを上手に使って解決に導くことができそうです。