Application Cacheのmanifestファイルをメンテナンスするのは意外と面倒です。gruntタスクを定義するとこういう面倒なことから解放されます。Application Cacheはダメだというブログもありますが、ダメだブログも参考にしつつ私は普通に使ってます。
Application Cacheの利用
HTML5 Experts.jpでもハイブリット特集が行われるなど、モバイルWebの普及が急増しているのは確かだと思います。様々なところで「モバイルアプリ開発」というキーワードが出てきます。
モバイルアプリケーションでは、オンラインであろうがオフラインであろうがある程度のものは利用できることをユーザは期待していて、必然的にApplication Cacheを利用する局面というのがあります。
Application Cacheの利点を生かしたSingle-page Application - 概要編 - albatrosary's blog
でも書いた通りApplication CacheはHTMLやCSS、JavaScriptを更新してもクライアントにはダウンロードされず、manifestファイルを何かしら更新しないといけません。通常更新日付をmanifestファイルの中に定義して、その日付を更新することでmanifestファイルをupdateします。
CACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2013-04-06 12:40
ただ毎回それを手動で行うのは面倒なので、そんなときに使うのがgrunt-appcacheです。
インストール
npm install grunt-appcache --save-dev
サンプル
下記サンプルは実際に利用しているGruntfile.jsの設定です。詳細を説明します。
all.destでmanifestファイルを指定します。
all.cacheでキャッシュさせるファイルを指定します。リリースしないファイルを除くことができ、その場合には「!」を書きます。manifestファイルに利用するファイルをすべて指定しないとApplication Cacheがうまく動きませんのでall.network句に「*」を指定します。
appcache: {
options: {
// Task-specific options go here.
basePath: '<%= yeoman.app %>'
},
// Target-specific file lists and/or options go here.
all: {
dest: '<%= yeoman.app %>/html5jenterprise.appcache',
cache: {
patterns: [
'<%= yeoman.app %>/**/*.html',
'!<%= yeoman.app %>/404.html',
'!<%= yeoman.app %>/bower_components/**/*.html',
'<%= yeoman.app %>/bower_components/**/*.min.js',
'<%= yeoman.app %>/bower_components/**/*.min.js.map',
'!<%= yeoman.app %>/bower_components/jquery/src/**/*.js',
'<%= yeoman.app %>/bower_components/**/*.min.css',
'<%= yeoman.app %>/bower_components/**/*.css.map',
'<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/*.eot',
'<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/*.svg',
'<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/*.ttf',
'<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/*.woff',
'<%= yeoman.app %>/scripts/**/*.js',
'<%= yeoman.app %>/**/*.png',
'<%= yeoman.app %>/**/*.ico',
'<%= yeoman.app %>/events/*.json',
'<%= yeoman.app %>/styles/*.min.css',
'<%= yeoman.app %>/styles/main.css'
],
},
network: '*'
}
},
参考までに作成されたmanifestファイルを添付します。gruntでタスクが実行されるたびに「# rev・・」が更新されます。テンプレートであるHTMLファイル等が増えた場合も上記ルールに従っていればmanifestファイルに追加されるという仕組みです。
CACHE MANIFEST # rev 132 - 2014-07-11T09:13:46.410Z CACHE: aboutus.html googleae1268b386fbb4cb.html index.html posts/event/2013-03-15-html51.html posts/event/2013-05-10-html52.html posts/event/2013-08-01-html53.html posts/event/2013-09-09-html54.html posts/event/2013-10-31-html55.html posts/event/2014-01-27-html56.html posts/event_archive.html readme.html views/aboutus.html views/archive.html views/main.html views/readme.html views/ustream.html bower_components/angular-cookies/angular-cookies.min.js bower_components/angular-resource/angular-resource.min.js bower_components/angular-route/angular-route.min.js bower_components/angular-sanitize/angular-sanitize.min.js bower_components/angular/angular.min.js bower_components/bootstrap/dist/js/bootstrap.min.js bower_components/jquery/dist/jquery.min.js bower_components/angular-cookies/angular-cookies.min.js.map bower_components/angular-resource/angular-resource.min.js.map bower_components/angular-route/angular-route.min.js.map bower_components/angular-sanitize/angular-sanitize.min.js.map bower_components/angular/angular.min.js.map bower_components/bootstrap/dist/css/bootstrap-theme.min.css bower_components/bootstrap/dist/css/bootstrap.min.css bower_components/bootstrap/dist/css/bootstrap-theme.css.map bower_components/bootstrap/dist/css/bootstrap.css.map bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff scripts/controllers/main.js scripts/main.js scripts/vendor/bootstrap.min.js scripts/vendor/modernizr-2.6.2-respond-1.1.0.min.js apple-touch-icon-114x114-precomposed.png apple-touch-icon-144x144-precomposed.png apple-touch-icon-57x57-precomposed.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-precomposed.png apple-touch-icon.png img/btn_mini_facebook.png img/btn_mini_twitter.png img/glyphicons-halflings-white.png img/glyphicons-halflings.png img/html5logo.png favicon.ico events/archive.json events/events.json styles/bootstrap-responsive.min.css styles/bootstrap.min.css styles/main.css NETWORK: *
最後に
使われて技術は進歩します。こういう新しい技術は使って試行錯誤が重要です。gruntを活用してWebアプリケーション開発をさくっとやりましょう。
