Webアプリケーションを構築する上でレスポンスを向上させるための技術のひとつとしてキャッシングというものがあります。キャッシングされる仕組みは
- アプリケーションサーバ
- プロキシサーバ
- ブラウザ
で実装されています。
W3Cではこれとは別にApplication Cacheという規格を定義しています。Single-page Applicationとの相性は良いとされていますがアーキテクチャの観点から何がどうなっているのかを今回は簡単に概要を述べたいと思います。
Application Cacheとは
静的なリソースに対してブラウザにキャッシングする仕組みがApplication Cacheです。AppCacheとも言うことがあります。実装は簡単で次のようHTMLへの定義およびmanifestファイルの記述でAoolication Cacheの実装が可能です。メリットはオフラインの状態でもurlを指定するとあたかもネットワークに接続しているかのごとく動作します。
htmlでの記載方法
<html manifest="sample.appcache">
manifestファイル
CACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2013-04-06 12:40 # キャッシュしたいリソース # このうち一つでもファイルが見つからないとエラーになりキャッシュされません。 CACHE: sample.html js/test.js css/test.css # 常にネットワーク上を参照して欲しい場合に使用 # 必ずオンラインアクセスを試みるリソース NETWORK: test.cgi # 代替エントリを宣言 # アクセスに失敗した場合に代わりに使用するリソース（NETWORK:と両方に指定すると動作しない） FALLBACK: online.png error.png
ややこしいこと（すこし説明）
manifestファイルが更新されていないとダメ
HTMLやJavaScriptファイル等を書き換えてもブラウザに保存されたリソースの更新は行いません。manifestファイルが更新されていなくてはなりません。そのために
# 2013-04-06 12:40
のようなものを用意してリソースが更新されるたびにタイムスタンプを入れ替えます。
# 2013-04-06 v30
のような書き方でも問題ありません。つまり何でもいいのです。とにかくリソースが更新されたらmanifestファイルも何かしらの手段で更新することが重要です。
キャッシュしたいリソースは必ずないとダメ
manifestファイルに記載するCACHE句にあるリソースは必ずないとキャッシュされません。様々な挙動がありリソースがダウンロードされずアプリケーションが実行できないというケースがあります。
実際にmanifestファイルを定義して実施
実際にmanifestファイルを定義して実行してみます。manifestファイルは
CACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2014-02-21 20:20 CACHE: index.html scripts/templates.js scripts/main.js scripts/collections/contact.js scripts/models/contact-model.js scripts/routes/main.js scripts/views/about.js scripts/views/account.js scripts/views/home.js scripts/views/new.js scripts/views/search.js styles/main.css bower_components/jquery/jquery.js bower_components/modernizr/modernizr.js bower_components/requirejs/require.js bower_components/sass-bootstrap/dist/js/bootstrap.min.js bower_components/underscore/underscore.js bower_components/backbone/backbone.js ## livereload http://localhost:35729/livereload.js http://localhost:35729/livereload.js?snipver=1 ws://localhost:35729/livereload ## エラーページ http://requirejs.org/docs/errors.html#scripterror
$ grunt serve
でアプリケーションを起動します。するとキャッシュされているのが分かります。
次にgrunt serveを止め、ブラウザを閉じ、再びブラウザを起動してurlを指定して実行するとちゃんとアプリケーションが利用できます。もちろん通常通りアプリケーションを利用することが可能です（下記ブラウザでlocalhost:9000となってますがアプリケーションサーバは立ち上がってません）。
最後に
今回はただ単に使ってみたというレベルです。Webアプリケーションでありながらネットワークから遮断された環境でも利用可能であることが分かると思います。動的なリソースをWeb Storageへ保存することで本格的なアプリケーションの構築が可能となります。
実はApplication Cacheに関しては、このように簡単なことだけではありません。次回はより詳細にApplication Cacheについて触れたいと思います。
