February 5, 2012
Google App Engine で HTML5 の Application Cache
参考:
- iPhoneでHTML5のアプリケーションキャッシュを利用する
- アプリケーションキャッシュの使い方
- GAE (Google App Engine) で Cache Manifest を使うには
- HTML5的にmanifestファイルをゴニョった
マニフェストファイルを用意する
拡張子は .appcache (.manifestから変更された)。以下サンプル。
CACHE MANIFEST
# version 1.0
CACHE:
path/to/the/file.html
/could/be/absolute/path.js
NETWORK:
always/refer/to/serverside/content.html
# external source
http://example.com/
サーバを参照するものがある場合は、必ず NETWORK に指定(CACHEで指定したもの以外はサーバを参照する、という事ではない)。
マニフェストファイルが更新されないとブラウザはキャッシュし続ける。ファイルの構成が変わらなくても更新させたい場合を考えて、コメントでバージョンとか日付とか入れておき、キャッシュを更新させる場合はここを変更する。
HTMLとJavaScript
HTMLタグにmafifest属性を追加。
<html manifest="example.appcache">
JavaScriptでキャッシュ対象のファイルがアップデートされた時に更新する。
applicationCache.addEventListener("updateready", function(){
applicationCache.swapCache();
}, false);
GAEの設定 (app.yaml)
mime_typeを text/cache-manifestにする。以下、例。
- url: /(.*)\.appcache
static_files: static/\1.appcache
upload: static/(.*)\.appcache
mime_type: text/cache-manifest