HTML5のアプリケーション・キャッシュなる仕組みの最小的なサンプルを作ってみた。
HTML5 Application Cache Sample

Firefox 3.6 で見たけど、キャッシュされるとリロード(Ctrl+F5とか)しただけじゃほんとに読み込んでくれなくなるのね。びっくり。

サンプルのコード。

application_cache_sample.html


<!DOCTYPE html>
<html manifest="application_cache_sample.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application Cache Sample</title>
</head>
<body>
<h1>HTML5 Application Cache Sample</h1>
<p>
<img src="application_cache_sample.jpg" />
</p>
</body>
</html>

application_cache_sample.manifest


CACHE MANIFEST
# comment line
application_cache_sample.jpg

Firefox 3.6 でアプリケーションキャッシュを削除するにはメニューから [ツール] → [オプション] → [詳細] → [ネットワーク] → [オフライン作業用のデータを保存している Web サイト] から選んで [削除] する。

キャッシュ・マニフェストなるファイルがあって、このファイルにキャッシュしたいファイル名を書いていく。
キャッシュ・マニフェスト・ファイルは、 ".manifest" にしなきゃいけないという命名規則があるわけじゃなくて何でも良さそう。ただ、静的ファイルではこの拡張子が一般的っぽい。

ファイル名がどうこうよりも、キャッシュ・マニフェスト・ファイルは Content-Type: text/cache-manifest で配信しないといけない。こっちのほうが大事。
動的に配信する場合はプログラムで設定したり。

静的なファイルでは Apache の設定ファイルに


AddType text/cache-manifest .manifest

って書くとか。

AddType ディレクティブは、 与えられた拡張子を指定されたコンテントタイプにマップします。 MIME-type は拡張子 extension を含んだドキュメントに使用する MIME タイプです。 この新しいマッピングは既にあるマッピングに追加され、同じ拡張子 extension のためのマッピングを上書きします。 このディレクティブは MIME タイプファイル (TypesConfig ディレクティブを参照) に無いマッピングを追加するために使用することができます。
(中略)
新しい MIME タイプは、TypesConfig ファイルを変更するのではなく、AddType ディレクティブを使って追加することが推奨されています。

mod_mime - Apache HTTP サーバ

昔は TypesConfig ファイル (Apache 1.3系だと apache/conf/mime.types) をいじったりしてたなぁ。。。

Ref.
- ApplicationCache - iPhone 3G DevWiki
- Offline resources in Firefox - MDC Doc Center
- 5.6 Offline Web applications — HTML5

tags: html5

Posted by NI-Lab. (@nilab)