HTTP通信 の キャッシュ 無効化

0 件のコメント

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 以下にぶら下がる コンテンツ、通信はすべて キャッシュ が 無効化 されます。

  1. "インターネット インフォメーション サービス(IIS) マネージャー" を起動します。
  2. キャッシュを無効化したいフォルダを選択します。(ここでは //Default Web Site/sample )
  3. "HTTP 応答ヘッダー" を開きます。(ダブルクリック または 右上 "操作" の "機能を開く" を選択)
  4. 右上 "操作" の "追加..." を選択し、以下の 応答ヘッダー を追加します。
    • 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

今回、参考にしたサイトは以下の通りです。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!