ブラウザオフラインアプリケーションが作れる「Application Cache」

アプリケーションキャッシュとは

HTML5にはファイルをローカルにキャッシュする仕組みが用意されています。
アプリケーションキャッシュを利用することで、あまり変化のないファイルをローカルにキャッシュさせ、アプリケーションの読み込み時間を短縮することができます。もちろん、アプリケーションではなく、Webサイトへの応用も可能です。更にすべてのファイルをキャッシュさせることで、オフライン利用が可能なWebページ、アプリケーションを作成することができます。
これを利用するにはManifestファイルというものを作成します。

アプリケーションキャッシュの保存容量

確認が取れた正確な情報ではありませんが、フォーラムなどでは普通のキャッシュと同様に無制限に保存され、足りなくなれば消されるようです。

Manifestファイルのサンプル

マニフェストファイルの拡張子が.manifestから.appcacheに変更されたようです。Content-Typeの指定により拡張子の影響はほとんどないと思われます。

以下のようにキャッシュさせたいファイル、ネットワーク経由で取得したいファイルを定義し、「.appcache」という形式で任意の場所に保存します。

 CACHE MANIFEST # Revision: 20100526-2100 ## Cache Files CACHE: js/jquery.js js/common.js ## Network Files NETWORK: /index.php /index.js 

キャッシュするファイルを定義する（CACHE:）

CACHE:という宣言以降にキャッシュするファイルを定義します。パスはマニフェストファイルからのURIを指定します。

ネットワークアクセスするファイルを定義する（NETWORK:）

NETWORK:という宣言以降にネットワークアクセスするファイルを定義します。パスはマニフェストファイルからのURIを指定します。

保存したファイルをHTML要素にひもづける

ファイルを作成しただけでは、アプリケーションキャッシュは有効になりません。
アプリケーションキャッシュを有効にしたいHTMLファイルのHTML要素にmanifest属性を追加し、パスを通します。

Content-Typeの設定

最後に、ブラウザに対してmanifestファイルを認識させるための指定を行います。
ブラウザは.appcacheファイルを「Content-Type: text/cache-manifest」としてヘッダー送出されないと正しく認識してくれません。

Content-TypeはApacheのconfファイルか.htaccessで設定できます。

.htaccessの設定例

 AddType text/cache-manifest .appcache 

httpd.confの設定例

 AddType text/cache-manifest .appcache

参考サイト

• Offline Web applications

サンプル

応用次第でオフラインアプリケーションが作成できますね。

Application CacheとjQuery Mobileを使ったオフライン対応でシンプルなタスクアプリはこちら。
iPhone

この記事は「Application Cache」の転載です。