IE9 のキャッシュ対策

公開日: : 最終更新日:2013/12/29 プログラム

どのようなバグだったのか

POST で送信した内容を確認する画面で、最新の内容が表示されないというバグ。chrome や Firefox では正しい内容が表示されるが、IE9 だけ古い内容が表示されてしまう。

原因はキャッシュ

デバッグしてみると、確認画面を表示する際にサーバに情報を取りに来ていないことが分かった。情報を取りに来ていないのにも関わらず画面が表示される。そしてその内容は古い。となれば、IE9 がキャッシュを表示していることで間違いないだろう。

古い内容が表示されるという時点でキャッシュを疑ったが、デバッグしてみるとやはりそうだった。

解決方法

IE9 にキャッシュを使わせない方法がないかと調べると、同じように手を焼いている人は結局居るようだ。

検索の上位にヒットしたページでは、主に次の2点を回避方法を挙げていた。

  1. meta タグを埋め込む
  2. ページ内で使用している JavaScript の呼び出しをユニークにする

meta タグを埋め込む

こんな感じに埋め込むらしい。

<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

ページ内で使用している JavaScript の呼び出しをユニークにする

src 属性 が常にユニークになるようにパラメータを付けるようだ。

<script type="text/javascript" src="./hoge.js?" + new Date().getTime(); charset="utf-8" ></script>

さらに対策が必要だった

上記を適用しただけでは解消しなかった。別に上記の方法が間違っている、ということではなくて。

そもそも別サイトなのでさくっとハマらなくてもそれは仕方ない。上記の方法で解消するケースもあれば、ウチのように解消しないケースもあるってだけのこと。

でも、2. はかなりヒントになったので、すぐに解消できた。そのとき考えたことはこんな感じ。

  1. 問題となった画面の URL は不変である
  2. IE9 はキャッシュ優先主義
  3. 同じ URL だからキャッシュが表示される
  4. 常にユニークな URL ならキャッシュは存在しない
  5. キャッシュが存在しないのならブラウザはサーバにアクセスせざるを得ない
  6. 常に GET してほしい URL にはユニークになるパラメータを付ける

ということで、次の部分においてURLのユニーク化を行ったところ解消できた。

  1. 問題となった画面の URL
  2. 問題となった画面で使用している JavaScript の src タグ
  3. 問題となった画面から JavaScript を使ってサーバに情報を取得する部分の URL
  4. 問題となった画面で画像を表示する場合は、その img タグの src 属性

要はアクセスする URL はすべてユニーク化した。おそらく、3, 4 はマスト。1 はやっておいたほうがいい、2 はやらなくていいかもという感覚。

今後のために例を載せておく。

1. 問題となった画面の URL

URL をこんな感じにする。ものすごくカッコ悪い。。。

  • http://huge/var/piyo?20130501123456

2. 問題となった画面で使用している JavaScript の src タグ

<html>
  :
  :
    <script type="text/javascript" src="./hoge.js?" + new Date().getTime(); charset="utf-8" ></script>
  </body>
</html>

3. 問題となった画面から JavaScript を使ってサーバに情報を取得する部分の URL

var condition = {};
condition.date = new Date().getTime();

$.ajax({
  type : "GET",
  url : "/hoge/piyo",
  data : condition,
  dataType : "json"
}).success(function(json) {
  alert("success");
}).error(function(XMLHttpRequest, textStatus, errorThrown) {
  alert("error");
});     

4. 問題となった画面で画像を表示する場合は、その img タグの src 属性

var image = new Image();
image.src = fileName + "?" + new Date().getTime();

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-8442052993_2978189f52_z-resized

参照可能な yum リポジトリを確認する yum コマンドとワンライナー

あるパッケージをインストールするために配布リポジトリの設定を追加することがあります。 ビジネスユー

記事を読む

icatch-medium_4301351732-resized

mp3splt を実行して “undefined symbol: mp3splt_u_check_if_directory” と出力されたときの対処法

mp3 ファイルを分割してくれる mp3splt というライブラリがあります。 mp3 ファイルを

記事を読む

icatch-markdown_14bd207bd7_mini-thumbnail

Markdown記法のテキストに書いたソースコードをシンタックスハイライトするプラグイン

SublimeText3 で拡張子が md のファイルを開いたときに、文章中に書かれたプログラムのソ

記事を読む

icatch_8617990318-resized

yum が参照するミラーサイトの baseurl を変更して日本国内のものに設定する

yum が参照するリポジトリのミラーサイトは変更することができます。 このミラーサイトを日本国内のも

記事を読む

icatch_5623339500-resized

Bundler を使ってプロジェクト用の Gem をインストールして Gemfile をバージョン管理ツールに登録するまでの流れ

Bundler を使い始める人向けにまとめた次の記事を書きました。 CentOSにRubyのBu

記事を読む

icatch-8785445626_587fdac14d_z-resized

検証用の CentOS をインストールした直後に行う初期設定手順

職場でも自宅でも Linux で検証したい作業があったので VMware に 64 ビット版の Ce

記事を読む

icatch_8626992930-resized

シェルスクリプトでcdしたいパスにスペースが入っている場合の対処法

cd したいパスにスペースが入っていると、パスの先頭からスペースまでを「移動したいパス」と解釈されて

記事を読む

icatch-2015-003-1

Vagrantで起動したCentOS上のMySQLにホストOSからログインする設定

マシンを新しくしたこともあり、検証と称してソフトウェアをやみくもにインストールすることに抵抗が出てき

記事を読む

no image

より安全にパスワードを保存するために考えること

知ってる人にとっては当たり前のことだろうが、あまり深く考えたことがなかったので調べてみた。 前提

記事を読む

20140811-00

64ビット版のCentOSをVMwareにインストールできない場合の対処法

Linux で検証したい作業が多かったので VMware に検証環境を作りました。OS は Cent

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


六 × = 12

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑