WEBアプリケーション 構築 をしていると、データ更新したはずなのに ブラウザ に反映されない!! ってときがあるかと思います。
ここでは、「新しい情報が取得できない」問題に対する HTTP通信 キャッシュ の 無効化 方法を幾通りか載せます。
状況に応じてどれか、または、いくつかを選択して キャッシュ を 無効化 してください。
静的コンテンツ
動的コンテンツ
個人的な環境、趣味、その他の都合により、Windows よりな対策になっていますがご了承ください。。
HTML の METAタグ に書く
次に示す METAタグ を head
セクションに記載します。
サンプルコード(HTML)
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
HTTP サーバー の設定を変える(IIS)
この設定を行うことで、指定 URL 以下にぶら下がる コンテンツ、通信はすべて キャッシュ が 無効化 されます。
- "インターネット インフォメーション サービス(IIS) マネージャー" を起動します。
- キャッシュを無効化したいフォルダを選択します。(ここでは //Default Web Site/sample )
- "HTTP 応答ヘッダー" を開きます。(ダブルクリック または 右上 "操作" の "機能を開く" を選択)
- 右上 "操作" の "追加..." を選択し、以下の 応答ヘッダー を追加します。
Cache-Control: no-cache, no-store
Pragma: no-cache
特定の MIME を キャッシュ しないようにする方法もあるようですが…
どうしてか、うまくいきませんでした。。
サーバー処理に書く(C# & ASP.NET MVC)
サーバー処理において、描画が始まる直前に、レスポンスヘッダーにキャッシュを無効化する内容を記載します。
以下の サンプルコード 中、11~12行目 が キャッシュ を 無効化 する コード です。
ここでは、 C# & ASP.NET という環境で書いていますが、他の言語(Java, PHP, Ruby 等)でも同様のことができます。
サンプルコード(C# & ASP.NET MVC)
public ActionResult Test()
{
// レスポンス用のサンプルデータを作成
var o = new
{
Message = "foo-bar",
DateTime = DateTime.Now.ToString("r")
};
// キャッシュしないようヘッダーを追加
this.Response.Cache.SetCacheability(HttpCacheability.NoCache);
this.Response.AddHeader("Pragma", "no-cache");
// 作成したデータを返信
return this.Json(o, JsonRequestBehavior.AllowGet);
}
リクエスト に 無意味な文字列を付加する
静的コンテンツ でも 動的コンテンツ でも、どちらでも対応できる方法です。
jQuery.ajax
の オプション にある cache: false
設定がこの方法に相当します。
サンプルコード(JavaScript)
var xhr = new XMLHttpRequest();
var url = 'http://localhost/BrowserCacheTest/Home/Test';
var responseText = '';
// URL に 無意味な クエリパラメータ を付加する
url += '?';
url += (new Date()).getTime();
// Chrome は動作が速すぎて時間が等しくなるため seed をつけて回避します
if (!window.seed) {
window.seed = 0;
}
url += window.seed++;
// XMLHttpRequest を実行
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
responseText = xhr.responseText;
}
};
xhr.send();
まとめ。
…いろいろと例を書いてきましたが、
結局、以下に示す内容が サーバー からの レスポンス ヘッダー に記載されていると キャッシュ が 無効化 されます。
Cache-Control: no-cache, no-store
Pragma: no-cache
今回、参考にしたサイトは以下の通りです。