Posted at

ブラウザキャッシュ(Cache Bustingとbfcache)について

More than 1 year has passed since last update.


Cache Bustingについて

ブラウザは、画像などの静的素材のキャッシュを行っているため、サーバー側の画像が更新されてもキャッシュのために画像が変わらないことがあります。

これを避けるために素材のパスに「?version=20180331」のようなクエリ文字列を付ける手法があります。これをCache Bustingといいます。


phpによる実現方法


  1. デプロイの際にCache Bustingに使う定数を定義したファイルを生成(デプロイごとにユニークになるようにする)

define("CACHE_BUSTING", "version=20180331");


  1. そのファイルをサーバー側で読み込む

  2. ビュー側で素材のパスにくっつける

<img src="a.png?<?php echo CACHE_BUSTING; ?>">

これでデプロイのたびにキャッシュの見る先が変わるため、昔のキャッシュを参照することがなくなります。


bfcache(back-forward cache)について

発端はiOSのsafariとAndroidのChromeでWebviewの動作確認をしていた時のことでした。

「あれ?なんかブラバした時の挙動が違うんだけど?」

見てみると、SafariではJavaScriptの状態が保存されており、chromeでは保存されていませんでした。

これはSafariのbfcache(back-forward cache)という仕組みによるものだそうです。

どんなものか調べてみたところ、ブラウザ側が親切でページを完全にキャッシュしておき、違うページからブラバしたときにキャッシュから読むことで高速化をしているらしいです。

結局自分のプロジェクトではiOS、Android間のこの挙動の違いは容認されましたが、挙動を揃えるのは一手間かかりそうです。

詳しくは参考文献を参照してください。


参考