アプリケーションキャッシュとは
HTML/CSS/JavaScriptや画像ファイルなど、Webページの表示に必要な諸々のファイルをユーザーのローカルに保存する仕組み。
なぜ、アプリケーションキャッシュが必要なの？
モバイル端末等の、通信速度が遅かったり、通信品質が低かったりする端末でも、Webサイトを快適に利用できるようにするため。また、アプリケーションキャッシュをフル活用すれば、オフラインでも動作するアプリケーションを作ることができる。
アプリケーションキャッシュの対応ブラウザーは？
Internet Explorer 10以上、主要なモダンブラウザー（Firefox, Chrome, Safari, Opera）の各最新版、Mobile Safari(iOS2.1以上)及びAndroid標準ブラウザー(Android 2.0以上)。
アプリケーションキャッシュの利用方法
キャッシュマニフェストの作成
キャッシュマニフェストとは、各ファイルのキャッシュ方針を示すファイルのこと。以下のような書式で記述する。
CACHE MANIFEST
# rev1
# キャッシュマニフェストにはコメントを書ける
# CACHE: でキャッシュするファイルを指定する
CACHE:
./app.js
./style.css
./logo.png
./not_found.html
# NETWORK: で、常にネットワークから取得するファイルを指定する
# *を使用すると、全てのファイルをネットワークから取得する
NETWORK:
*
# FALLBACK: で、ローカルにキャッシュされたファイルが存在しない場合の代替ファイルを指定する
# 左側のリソース（/以下の全てのファイル）がキャッシュされていない場合は、右側のリソースを表示
FALLBACK:
/ not_found.html
リビジョン以外のコメントを除去したバージョン：
CACHE MANIFEST
# rev1
CACHE:
./app.js
./style.css
./logo.png
./not_found.html
NETWORK:
*
FALLBACK:
/ not_found.html
キャッシュマニフェストファイルには、「example.appcache」といった具合に、「.appcache」という拡張子をつけるのが一般的。
キャッシュマニフェストの配信
キャッシュマニフェストは、text/cache-manifestというMIMETypeで配信する必要がある。Apacheの場合は、キャッシュマニフェストの配置ディレクトリに以下のような.htaccessを配置すると、配信できる。
AddType text/cache-manifest .appcache
キャッシュマニフェストの読み込み
HTMLファイルのmanifest属性で読み込むキャッシュマニフェストを指定する。
<!doctype html>
<html manifest="example.appcache">
<head>
<meta charset="UTF-8">
<title>HTML5 Application Cache Sample</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML5 Application Cache Sample</h1>
<img src="logo.png" alt="logo">
</body>
</html>
キャッシュマニフェストの更新
CHACHEでキャッシュするよう指定されているファイルについて、キャッシュ対象ファイルが更新された場合でも、ブラウザーは新しいファイルを取りに行かない。ブラウザーに再度リソースの取得をさせるためには、必ずキャッシュマニフェストを更新しなければならない。
キャッシュマニフェストの更新を伝えるのはコメント行の更新でもOKなので、コメント行のリビジョン等を更新して更新を伝える。
Application Cache API
キャッシュマニフェストが更新されても、即キャッシュが更新されるわけではない。流れとしては、(1) Webページを読み込む (2) キャッシュマニフェストが更新されていることがわかる (3) 次回アクセス時にキャッシュを破棄して新しいファイルを取りに行く となる。
こういったキャッシュの更新等の処理を、ブラウザー任せではなく自前で制御したい場合は、Application Cache APIを使用する。
たとえば、キャッシュを1時間おきに更新確認したい場合、以下のようなJavaScriptで実装できる。
document.addEventListener("onload", function() {
setInterval(function() {
applicationCache.update();
}, 1000 * 60 * 60);
});