読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

Application Cacheの利点を生かしたSingle-page Application - 概要編

Webアプリケーションを構築する上でレスポンスを向上させるための技術のひとつとしてキャッシングというものがあります。キャッシングされる仕組みは

で実装されています。

f:id:albatrosary:20140221180630p:plain

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

でアプリケーションを起動します。するとキャッシュされているのが分かります。

f:id:albatrosary:20140221201740p:plain

f:id:albatrosary:20140221201718p:plain

次にgrunt serveを止め、ブラウザを閉じ、再びブラウザを起動してurlを指定して実行するとちゃんとアプリケーションが利用できます。もちろん通常通りアプリケーションを利用することが可能です(下記ブラウザでlocalhost:9000となってますがアプリケーションサーバは立ち上がってません)。

f:id:albatrosary:20140221201654p:plain

最後に

今回はただ単に使ってみたというレベルです。Webアプリケーションでありながらネットワークから遮断された環境でも利用可能であることが分かると思います。動的なリソースをWeb Storageへ保存することで本格的なアプリケーションの構築が可能となります。

実はApplication Cacheに関しては、このように簡単なことだけではありません。次回はより詳細にApplication Cacheについて触れたいと思います。