HTML5のmanifestはブラウザ側のキャッシュを制御する機能で クライアントがネットに継っていなくてもWebアプリを 動かすことができる。

地味な機能だけどスマホみたいに通信が不安定な端末で Webアプリを動かそうとすれば必須の機能だと思う。

具体的な使い方は凄く単純でキャッシュ可能なファイルのパスの 一覧を記述したファイルを用意してそれを html タグの属性に指定するだけだ。

こんな感じ

index.html:

<!DOCTYPE html> <html manifest="cache.manifest"> :

cache.manifest:

CACHE MANIFEST # version 1.0 CACHE: # キャッシュするパス img/all32.png img/others.png sound/all.mp3 min/all-min.js NETWORK: # ネットワーク必須のパス FALLBACK: # エラー処理。パスを2つ記述。後の方がエラーのパス。 # / /error.html

書き方は

  • 先頭行の「CACHE MANIFEST」はマジックナンバーなので必須
  • # で始まる行はコメント
  • キャッシュをクリアする場合は manifest ファイルを更新。
  • ワイルドカードは使えない。
  • ブラウザによってはキャッシュしないパスは NETWORK: に記述が必須らしい。
だそうです。
ワイルドカードが使えないのがなにげにウザイです。

で、はまり所が1箇所有ります。
manifest ファイルは Content-type: text/cache-manifest で応答されなければならないのですが通常サーバ側に設定がありません。

ここでは GAE/J での設定方法を示します。

appengine-web-app.xml:

<static-files> : <include path="*.manifest"/> </static-files>

web.xml:

<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>

これでOKです。

凄く分かりづらいですが実際に試したところ。

サーバにアクセスしている状態。

無線LANを止めてリロードしても正常に動作。

参考:
  • こちらでJavaScriptからの制御方法まで整理されています。
    「[HTML5] アプリケーションキャッシュの使い方」
    http://tenderfeel.xsrv.jp/html-xhtml/html5-html-xhtml/1172/