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

WEBアプリケーション 構築 をしていると、データ更新したはずなのに ブラウザ に反映されない！！ ってときがあるかと思います。 ここでは、「新しい情報が取得できない」問題に対する HTTP通信 キャッシュ の 無効化 方法を幾通りか載せます。 状況に応じてどれか、または、いくつかを選択して キャッシュ を 無効化 してください。

静的コンテンツ

• HTML の METAタグ に書く
• HTTP サーバー の設定を変える（IIS）
• リクエスト に 無意味な文字列を付加する

動的コンテンツ

• サーバー処理に書く（C# & ASP.NET MVC）
• リクエスト に 無意味な文字列を付加する

個人的な環境、趣味、その他の都合により、Windows よりな対策になっていますがご了承ください。。

HTML の METAタグ に書く

次に示す METAタグ を head セクションに記載します。

サンプルコード（HTML）

<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）

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 の フォロー」 お願いします！！

• Facebook ページ
• twitter