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

albatrosary's blog

Webアプリケーション開発に関すること

gruntを使おう 〜 Application Cacheのmanifestファイルを自動メンテナンスする 〜

grunt Application Cache

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やCSSJavaScriptを更新してもクライアントにはダウンロードされず、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アプリケーション開発をさくっとやりましょう。