WEBアプリケーション 構築 をしていると、データ更新したはずなのに ブラウザ に反映されない!! ってときがあるかと思います。 ここでは、「新しい情報が取得できない」問題に対する HTTP通信 キャッシュ の 無効化 方法を幾通りか載せます。 状況に応じてどれか、または、いくつかを選択して キャッシュ を 無効化 してください。
静的コンテンツ
動的コンテンツ
個人的な環境、趣味、その他の都合により、Windows よりな対策になっていますがご了承ください。。
HTML の METAタグ に書く
次に示す METAタグ を head
セクションに記載します。
サンプルコード(HTML)
1 2 | < 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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var xhr = new XMLHttpRequest(); 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 の フォロー」 お願いします!!