HTML5 アプリケーション・キャッシュ
HTML5では、キャッシュ・マニフェスト・ファイルを作成することにより、 Web アプリケーションのオフライン版を作ることは簡単です。
（訳注）キャッシュ・マニフェスト・ファイルは、オフライン・アクセスに 備えてブラウザがキャッシュする必要があるリソースを列挙した、単純なテキスト ファイルです。
アプリケーション・キャッシュとは？
HTML5 は、Web アプリケーションをキャッシュして、インターネットに接続しなくともアクセスできる、 アプリケーション・キャッシュを導入しています。
アプリケーション・キャッシュには、次の3つの利点があります：
- オフライン・ブラウジング - ユーザはオフラインでもアプリケーションを使用することができます
- スピード - リソースがキャッシュされ、読み込み速度が速い
- サーバ負荷の削減 - ブラウザは、更新/変更されたリソースのみサーバからをダウンロードします
ブラウザ・サポート
表中の数字は、完全にアプリケーション・キャッシュをサポートした最初のブラウザのバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML キャッシュ・マニフェストの例
下の例は、キャッシュ・マニフェスト（オフラインブラウジング用）を使用した HTML 文書です：
例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Try it Yourself ❯
キャッシュマニフェストの基礎
アプリケーション・キャッシュを有効にするには、文書の <html> タグに manifest 属性を指定します：
<html manifest="demo.appcache">
...
</html>
manifest 属性を持つすべてのページは、ユーザが訪問したときにキャッシュされます。 manifest 属性が指定されていない場合、ページは（マニフェストファイルで直接指定されていない限り）キャッシュされません 。
マニフェストファイルの拡張子は、".appcache" が推奨されています：
マニフェスト・ファイルは、"text/cache-manifest" で正しいメディアタイプを提供する必要があります。 Web サーバで設定しなければなりません。
マニフェスト・ファイル
マニフェスト・ファイルは、何をキャッシュするか（そして、何をキャッシュしないか）を、 ブラウザに指示する単純なテキストファイルです。
マニフェスト・ファイルには、次の3つのセクションがあります：
- CACHE MANIFEST - このヘッダの下にリストされたファイルは、最初にダウンロードされた後にキャッシュされます
- NETWORK - このヘッダの下にリストされたファイルは、サーバへの接続を要求するが、キャッシュはされません
- FALLBACK - このヘッダの下にリストされたファイルは、ページにアクセスできない場合の、フォールバック・ページを指定します
CACHE MANIFEST
先頭の CACHE MANIFEST は必須です：
/theme.css
/logo.gif
/main.js
上記のマニフェストファイルには、CSS ファイル、GIF 画像 および JavaScript ファイルの3つのリソースがリストされています。 マニフェストファイルがロードされると、ブラウザは Web サイトのルートディレクトリから3つのファイルをダウンロードします。 その後、ユーザがインターネットに接続していないときでも、リソースが使用できるようになります。
NETWORK
下記 NETWORK セクションは、ファイル "login.html" がキャッシュされないよう、 そしてオフラインで使用できないように指定しています：
login.html
アスタリスクは、すべてのリソース/ファイルが、インターネット接続を必要であることを示すために使用できます：
*
FALLBACK
下記 FALLBACK セクションは、インターネット接続が確立できない場合、"offline.html" が /html/ カタログ内のすべてのファイルの代わりに提供されます：
/html/ /offline.html
注: 最初の URI はリソースで、2番目がフォールバックです。
キャッシュの更新
アプリケーションがキャッシュされると、次のいずれかが発生するまでは、キャッシュされたままです：
- ユーザが、ブラウザのキャッシュをクリアする
- マニフェストファイルが変更される（下記チップスを参照）
- アプリケーション・キャッシュがプログラムで更新される
例 - 完全なキャッシュ・マニフェスト・ファイル
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.html
FALLBACK:
/html/ /offline.html
 |
チップ："#" で始まる行はコメント行ですが、また別の目的のためにも使用することができます。 アプリケーション・キャッシュは、マニフェスト・ファイルが変更されたときだけ更新されます。 イメージを編集したり、JavaScript の機能を変更した場合でも、その変更内容は再キャッシュされません。 コメント行の日付とバージョンを更新するは、ブラウザにファイルを再キャッシュさせるための1つの方法です。 |
|---|
アプリケーション・キャッシュについての注意点
キャッシュするものに注意してください。
一旦ファイルがキャッシュされると、サーバ上のファイルを変更しただけでも、ブラウザはキャッシュされたバージョンを表示し続けます。 ブラウザによるキャッシュの更新を確実とするためには、マニフェストファイルを変更する必要があります。
注: ブラウザにより、キャッシュ・データ・サイズの制限が異る場合があります （一部のブラウザでは、サイトごとに5メガバイトに制限されています）。