2012/06/03
HTML5のmanifestを使ってみた。
HTML5のmanifestはブラウザ側のキャッシュを制御する機能で
クライアントがネットに継っていなくてもWebアプリを
動かすことができる。
地味な機能だけどスマホみたいに通信が不安定な端末で
Webアプリを動かそうとすれば必須の機能だと思う。
具体的な使い方は凄く単純でキャッシュ可能なファイルのパスの
一覧を記述したファイルを用意してそれを html タグの属性に指定するだけだ。
こんな感じ
index.html:
:
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
書き方は
ワイルドカードが使えないのがなにげにウザイです。 で、はまり所が1箇所有ります。
manifest ファイルは Content-type: text/cache-manifest で応答されなければならないのですが通常サーバ側に設定がありません。 ここでは GAE/J での設定方法を示します。 appengine-web-app.xml:
:
web.xml:
manifest
text/cache-manifest
これでOKです。
凄く分かりづらいですが実際に試したところ。
サーバにアクセスしている状態。
無線LANを止めてリロードしても正常に動作。
参考:
- 先頭行の「CACHE MANIFEST」はマジックナンバーなので必須
- # で始まる行はコメント
- キャッシュをクリアする場合は manifest ファイルを更新。
- ワイルドカードは使えない。
- ブラウザによってはキャッシュしないパスは NETWORK: に記述が必須らしい。
ワイルドカードが使えないのがなにげにウザイです。 で、はまり所が1箇所有ります。
manifest ファイルは Content-type: text/cache-manifest で応答されなければならないのですが通常サーバ側に設定がありません。 ここでは GAE/J での設定方法を示します。 appengine-web-app.xml:
- こちらでJavaScriptからの制御方法まで整理されています。
「[HTML5] アプリケーションキャッシュの使い方」
http://tenderfeel.xsrv.jp/html-xhtml/html5-html-xhtml/1172/
この投稿へのコメント
コメント・フォーム