2019年10月から消費税率が変わるってことで、かなり以前に開発したWebプログラムの修正をしました。
早速、JavaScriptを改良して、リリースって感じだったんですが、ユーザーから変更されていないって、クレームが。
「Google Chrome」を開いて回転矢印部分をクリックして再読み込みしても、結果は変わらず、って感じ。
ってなことで、今回は「CakePHP2のWebアプリで、JavaScriptやCSSをリリース際に、キャッシュが古いままになっていて、折角作ったプログラムが反映されずに困ったことになったが、ブラウザの設定を開いてキャッシュを削除してもらうなんて面倒なことをさせずに、ブラウザのキャッシュを削除する方法と、Cache Bustingと言う方法で最新のファイルをサーバーにリクエストさせる方法と、CakePHP2でCache Bustingを発生させるための超簡単の方法について」って言う、なが～いお題です。
スーパーリロードで、ブラウザ(Google Chrome)のキャッシュを削除する方法
ブラウザで再読込するだけでは、キャッシュは消えません。ブラウザの右上の回転矢印部分をクリックしても、F5を押しても、です。
いままで、こんな現象になった場合、ちょ～原始的に、ブラウザの設定を開いて、キャッシュを削除して、ブラウザを再起動するってな方法でやっていました。
で、今回改めて色々調べてみると、ウェブページの再読込と同時にキャッシュを削除する「スーパーリロード」って機能があるとのこと。
ほんのちょっと、気恥ずかしい感じがする、なんかの必殺ワザのようなネーミングの「スーパーリロード」ですが、操作は簡単。
いつもの「F5」キーでのリロードに加えて、
同時に「Ctrl」キーを押すコンボの「Ctrl ＋ F5」で、「スーパーリロード」の完成です。
このたった2つのキーだけで、ブラウザのキャッシュを削除することが出来ちゃいます。
今回は、この方法をユーザーに伝えて、一件落着って感じです。
Cache Bustingと言う方法で最新のファイルをサーバーにリクエストさせる方法
本当は、こっちの方が正解なのでしょうが、お次は「Cache Busting」を使う方法です。
ちなみに、「Cache Busting」ですが、「キャッシュ バスティング」ってことで、ゴーストバスターズのバスのing系てことでいいのか？、要はキャッシュを打ち壊しましょうって意味で大丈夫でしょう。
例として、以下のようなJavaScriptを読み込む部分があるとします。
<script type="text/javascript" src="/xxxx/js/jquery-1.7.2.min.js"></script>
このファイル名の後に、そのファイルのバージョンの固有の文字列を付加するように変更します。
<script type="text/javascript" src="/xxxx/js/jquery-1.7.2.min.js?1434000429″></script>
そうするとこにより、ブラウザに前のバージョンとは違うファイルだと認識させて、キャッシュの読込を回避するってな方法です。
ちなみに、「?1434000429」の部分ですが、日付やバージョン等、意味のあるものでも大丈夫です。
今回の例の「?1434000429」はCakePHPが勝手に付けてくれたものなので、これで良しとします。
CakePHP2でCache Bustingを発生させるための超簡単の方法について
で、やっと決定版のお話しです。
直前に書いた、「?1434000429」を付加する機能ですが、CakePHP2に予め装備されています。
ただし、肝心な部分は、初期状態ではコメントアウトされて使えなくなっていますので、このコメントを外して、1語書き換えてあげるだけなんです。
変更箇所は「core.php」の
//Configure::write('Asset.timestamp', true);
ってなっている部分です。
このコメントを外して「ture」の部分を「’force’」に変更して、こんな感じにします。
Configure::write('Asset.timestamp', 'force');
ちなみに、この部分の意味ですが、「core.php」のこの部分の直前に以下のような説明が書かれてあります。
pply timestamps with the last modified time to static assets (js, css, images).
Will append a querystring parameter containing the time the file was modified. This is
useful for invalidating browser caches.Set to `true` to apply timestamps when debug > 0. Set to ‘force’ to always enable
timestamping regardless of debug value.
Google先生に訳してもらうと、
最終変更時刻のタイムスタンプを静的アセット（js、css、画像）に適用します。
ファイルが変更された時刻を含むクエリ文字列パラメーターを追加します。
これはブラウザのキャッシュを無効にするのに便利です。debug> 0のときにタイムスタンプを適用するには、「true」に設定します。
「force」に設定すると、常に有効になりますデバッグ値に関係なくタイムスタンプ。
って、ことなので「’force’」にしています。
たった、これだけで、一気にお悩み解決です。知らんかったのは私だけ？
最後に
「core.php」の中のコメント分なんて、ほとんど読んだことはありませんでした。
「灯台下暗し」ってやつです。
やっぱり、重要なコメントやドキュメントは、英語だからって読み飛ばさずに、中身を理解すべきなんでしょうね。当たり前でしょうが。今は、便利なGoogle翻訳とかもあるので、敷居はかんり下がっているとは思いますが、身体が拒絶してしまいます。バカだからね。
ってなことで、これを機会に猛省した次第です。
