HTML5アプリケーションキャッシュ
- 前のページ HTML5 Web ストレージ
- 次のページ HTML5 Web ワーカー
アプリケーションキャッシュを使用して、cache manifestファイルを作成することで、ウェブアプリケーションのオフラインバージョンを作成できます
アプリケーションキャッシュとは何ですか？
HTML5はアプリケーションキャッシュ（Application Cache）を導入しました。これは、ウェブアプリケーションをキャッシュし、インターネット接続がなくてもアクセスできることを意味します。
アプリケーションキャッシュはアプリケーションに3つの利点をもたらします：
- オフラインブラウジング - ユーザーはアプリがオフラインであるときにそれらを使用できます
- 速度 - キャッシュされたリソースの読み込みがより速くなります
- サーバーの負荷を減らす - ブラウザは更新されたまたは変更されたリソースのみをサーバーからダウンロードします
ブラウザのサポート
テーブルの数字は、アプリケーションキャッシュを完全にサポートする最初のブラウザバージョンを示します。
| API | |||||
| アプリケーションキャッシュ | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Cache Manifest 例
以下は、cache manifestを持つHTMLドキュメントの例です（オフラインでの閲覧用）：
例
!DOCTYPE HTML <html manifest="demo.appcache"> <body> ドキュメントの内容...... </body> </html>
Cache Manifest 基礎
アプリケーションキャッシュを有効にするには、ドキュメントの<html>タグにmanifest属性を含める必要があります：
!DOCTYPE HTML <html manifest="demo.appcache"> ... </html>
manifestを指定した各ページは、ユーザーがアクセスしたときにキャッシュされます。manifest属性が指定されていない場合、ページはキャッシュされません（manifestファイルで直接指定されたページを除き）。
manifestファイルの推奨のファイル拡張子は「.appcache」です。
注意：manifestファイルは正しいMIME-type、つまり「text/cache-manifest」を設定する必要があります。ウェブサーバー上で設定する必要があります。
Manifest ファイル
manifestファイルはシンプルなテキストファイルで、ブラウザにキャッシュされる内容（およびキャッシュされない内容）を教えます。
manifestファイルには3つの部分があります：
- CACHE MANIFEST - このタイトルの下にリストされたファイルは初めてダウンロードされた後にキャッシュされます
- NETWORK - このタイトルの下にリストされたファイルはサーバーとの接続が必要で、キャッシュされません
- FALLBACK - このタイトルの下にリストされたファイルは、ページがアクセスできない場合のリバックページ（例えば404ページ）を定義します
CACHE MANIFEST
第一行、CACHE MANIFEST、は必須です：
CACHE MANIFEST /theme.css /logo.gif /main.js
上記のmanifestファイルには、3つのリソースがリストされています：CSSファイル、GIF画像、およびJavaScriptファイルです。manifestファイルが読み込まれた後、ブラウザはウェブサイトのルートディレクトリからこれらの3つのファイルをダウンロードします。それから、ユーザーがインターネットと接続が切れた場合でも、これらのリソースは依然として利用可能です。
NETWORK
以下のNETWORK部分では、ファイル「login.php」は常にキャッシュされず、オフライン時には使用できないと定義されています：
NETWORK: login.asp
すべての他のリソース/ファイルがインターネット接続が必要であることを示すために、星号を使用できます：
NETWORK: * FALLBACK
以下の FALLBACK 部分では、インターネット接続が確立できない場合、/html/ ディレクトリ内のすべてのファイルに「offline.html」を使用して代替します：
FALLBACK: /html/ /offline.html
注記：最初の URI はリソース、次のものは代替です。
キャッシュの更新
アプリケーションがキャッシュされると、以下のいずれかの状況が発生するまでキャッシュされます：
- ユーザーがブラウザのキャッシュをクリア
- manifest ファイルが変更されました（以下のヒントを参照してください）
- アプリケーションキャッシュをプログラムで更新
例 - 完全な Cache Manifest ファイル
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
ヒント：「#」で始まるのはコメント行ですが、他の用途にも使用できます。アプリケーションのキャッシュは、manifest ファイルが変更されたときにのみ更新されます。画像を編集したり、JavaScript ファンクションを変更したりした場合、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新することで、ブラウザがファイルを再キャッシュする方法の一つです。
アプリケーションキャッシュに関する注意点
キャッシュの内容に注意してください。
ファイルがキャッシュされると、ブラウザはキャッシュされたバージョンを表示し続けます。サーバー上のファイルを変更した場合でも、キャッシュを更新するために manifest ファイルを更新する必要があります。
注記：ブラウザのキャッシュデータの容量制限は異なります（一部のブラウザの制限は、各サイトで 5MB です）。
- 前のページ HTML5 Web ストレージ
- 次のページ HTML5 Web ワーカー
