Firefox で BFCache によるキャッシュを無効化する方法

2013年1月28日月曜日

Firefox で BFCache によるキャッシュを無効化する方法

発端

Firefox で開発をしていると、サーバのJavaScriptを変更してもFirefoxがキャッシュしているJavaScriptを使用してしまっていたりすることがある。
これがJavaScriptだけならまだCtrl+Shift+Rで強制読み込みさせて回避できるのだが、JSONの戻りまでキャッシュされてしまう事がある。
キャッシュされたリクエストをFirebugのネットタブで表示すると、以下のようになる。
※google.co.jpを表示した例

レスポンスヘッダを見ると、以下のメッセージが

キャッシュから直接リクエストが解決されたため、サーバからのレスポンスはありません。キャッシュされているレスポンスについては下を参照してください。

これは、Firefox 15から搭載されている、BFCache(Back-Forward Cache)という機能によるものだ。

Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。
Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。
 ページが unload ハンドラを使用している
 ページが "cache-control: no-store" をセットしている
 ページが "cache-control: no-cache" をセットしていて、サイトが HTTPS である
 ページが完全にはロードされないまま、ユーザがそのページから去るナビゲートをする
 トップレベルのページにキャッシュ不可能なフレームがある
 ページがフレーム内にあり、ユーザがそのフレーム内に新しいページをロードする（この場合、ユーザがそのページから去るナビゲートをするとそのフレームに最後にロードされたコンテンツがキャッシュされる）

この新しいキャッシュ機能により、ページロードの挙動が変わります。ウェブ作者は次のことをしたいと思うことがあるでしょう。
 ナビゲートされたことがあるページであることを知ること（そのページがユーザのキャッシュからロードされるとき）
 ユーザがそのページを去るときのページの挙動を定義すること（ページがキャッシュされるようになっている間）

ブラウザの 2 つの新しいイベントによってウェブ作者はそのどちらもできるようになります。

Using Firefox 1.5 caching | MDN

https://developer.mozilla.org/ja/docs/Using_Firefox_1.5_caching

JSONのレスポンスが保存されるのは、以下の記載によるものであると思われる。

ウェブページの標準的な挙動は次のとおりです。
 ユーザがページにナビゲートする。
 ページロード時にインラインスクリプトが実行される。
 ページがロードされると onload ハンドラが実行される。

4 ステップ目があるページもあります。ページが unload ハンドラを使用していると、ユーザがそのページから去るナビゲートをするときにそれが実行されます。unload ハンドラが存在しているとそのページはキャッシュされません。
ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません（ステップ 2 および 3）。ほとんどの場合、これらのスクリプトの効果が保存されているためです。

BFCache を無効にしてみる

開発を行う上で、JavaScriptや、JavaScriptの結果、JSONがキャッシュされてしまうのはかなり迷惑。
という事でBFCacheを無効にしてみます。
※ブラウジングのパフォーマンスに影響する可能性があるため、開発用のプロファイル等を作成し、そのプロファイルでのみBFCacheを無効にする事をお勧めします。