Angular キャッシュ対策 #JavaScript

背景

キャッシュ対策を行っていなかったため、毎回ソース差し替え後にブラウザ側のキャッシュクリアが必要だった。js、cssファイルについては、ファイル名にビルド時にハッシュ値をつけるようにしていたため、対策を取れていたがhtmlファイルについては、未対応だった。

なぜ、htmlファイルだけ未対応だったのか。

js、cssファイルのビルド時のハッシュ値付与は、gruntのfilerevディレクティブで行っていた。filerevディレクティブはhtmlのハッシュ値付与は対応していない(厳密にはハッシュ値付与はできるが、usermin時に紐付きがうまくいかない)

環境

AngularJs1.4
ビルドツール(grunt)

解決方法

以下2点の対応を行いました。

htmlファイルをjsファイルにして、filerevの対象にする。

そうすることで、ハッシュ値を付与することができるようにする。
最終的には、usminを利用して他のjsファイルとあわせて1つのファイルにしています。
htmlファイルをjsにする
→grunt-angular-templatesを利用※
grunt-angular-templatesとは、$templateCacheサービスを利用したもの。
これを利用することで複数のhtmlファイルを１つにまとめることができる。
index.htmlにキャッシュを使うかどうかは毎回確認するようmetaタグで明示的に指定

一つめの対応では、各テンプレートファイル(html)を呼びだす大元のindex.htmlだけはまとめることはできないので、これについてはmetaタグで対応を行いました。
index.htmlの<head>タグで以下を指定
※no-cacheは、キャッシュを取らないという意味ではなく、キャッシュを利用するか毎回Webサーバに問い合わせにいく

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

※grunt-angular-templatesの使いかた

grunt-angular-templatesを有効にする
Gruntfile.jsに以下を追加 grunt.loadNpmTasks('grunt-angular-templates');
まとめる対象のhtmlのパスと出力先、ファイル名を定義

Gruntfile.js

ngtemplates:
  app:
    cwd: 'app'
    src: 'templates/**.html',
    dest: '.tmp/template.js'

3.gruntのbuildタスク時にngtemplateを実施するよう定義

Gruntfile.js

  grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'ngtemplates',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

4.他のjsファイルと最終的には一つにするため(usemin)のための記載
template.jsが複数htmlを一つにまとめたものになります。

index.html

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src=".tmp/template.js"></script>

5.grunt buildを実施

確認

Chromeのデベロッパーコンソールで、以下を確認。

index.htmlについては、HTTPステータスコードが304(サーバ上のファイルが更新されていなかったのでキャッシュを利用)
jsにしたhtmlファイルがリリース後は、新しく読み込まれること(キャッシュを使用しないこと）

以下記事を参考にさせていただきました。
http://qiita.com/katahirado/items/95dfc456c73fb6389e27
http://qiita.com/izumin5210/items/6489476c650c022e402a

Angular キャッシュ対策

背景

なぜ、htmlファイルだけ未対応だったのか。

環境

解決方法

htmlファイルをjsファイルにして、filerevの対象にする。

index.htmlにキャッシュを使うかどうかは毎回確認するようmetaタグで明示的に指定

確認