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
今回、参考にしたサイトは以下の通りです。
- HTMLタグ/ページ全般タグ/ページをキャッシュさせない - TAG index Webサイト
- [IIS] 特定の MIME の種類のキャッシュを無効にする方法
- 静的コンテンツの MIME マッピングの追加 <mimeMap>
- jQuery.ajax() | jQuery API Documentation
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!