最初理解できなかった。しかし、よく読んだらHTML5のmanifest機能を利用しているとわかった。
なるほどという感想だね。
iPhone/iPad向けWebアプリ開発時のローカルファイルキャッシュ
http://cloudcodedev.blogspot.com/2010/08/iphoneipadweb.html
iPhone/iPad向けのWebアプリケーションを開発する際、SenchaやjQTouchなどの
ライブラリーを活用してWebアプリケーションをあたかもネイティブアプリのように
振舞わせるわけだが、その際に避けて通れないのが
「ライブラリ・CSSなどのロード時の速度低下」です。
ライブラリやCSSなどのファイルのロードがかなり時間を食ってしまい、
利用者に「このページ遅いな」と思われてしまいます。
それを防ぐためには
「iPhone/iPadのフラッシュメモリ内にJavaScriptやCSSなどのファイルを保存させる」
という設定を行ないます。
この設定には「manifest」ファイルをサーバ側で用意し、manifestファイルには、
「どのファイルをローカルキャッシュさせるか」を記述してあげる必要があります。
以下に記述例を記載します。
使用するファイルの構成は以下の通りとなります。
【プロジェクトフォルダ内】
CSSファイル
/css/js/sencha_icons/mystyle.css
（元々app.yamlに以下の
- url: /css
static_dir: css
という静的ファイルディレクトリ指定の設定をしています。）
JavaScirptファイル
/css/js/sencha_icons/ext-touch.js
/css/js/sencha_icons/index.js
作成したmanifestファイル
/css/js/sencha_icons/sitefile.manifest
1.まずはじめに、使用するHTMLファイル内のソースに
と記述します。
（example.manifestはexampleという名前のマニフェストファイルとなります。）
2.app.yamlに以下の内容を記述します。
- url: /css/js/sencha_icons/sitefile.manifest →所在URL
static_files: /css/js/sencha_icons/sitefile.manifest →ファイルの在処
mime_type: text/cache-manifest →mime_typeの指定
（↑これがないとマニフェストファイルとして認識されません。）
upload: /css/js/sencha_icons/sitefile.manifest →ファイルのアップロード先
3.sitefile.manifestファイル（ファイル名はsitefileでなくてもOK）を作成し、以下の内容を記述します。
CACHE:
mystyle.css
ext-touch.js
index.js
4.デプロイしてiPhone/iPadのブラウザで再読込する。
これで上記の3つのファイルがiPhone/iPadのローカルに保存され、
ページのロードが高速になります。
参考URL: http://www.html5rocks.com/tutorials/appcache/beginner/
