■ JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ
プログラマ「プログラムを更新しました」
デバッガ「いきなりエラーがでますよ！動作確認したんですか！」
プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」
デバッガ「キャッシュをクリアしたらエラーがでなくなりました」
デバッガ「でも、ユーザ全員にキャッシュをクリアさせるの？」
今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。
先人達は偉大すぎます。
<link href="common.css" rel="stylesheet" type="text/css">
この記述だとサーバ側の「common.css」を更新しても、
クライアント側のキャッシュの「common.css」が使用されて、
サーバ側の変更が反映されない可能性があります。
これをcssやjsにクエリー文字列を付加することで、
「common.css」ではなく、「common.css?20060425」でキャッシュさせます。
<link href="common.css?20060425" rel="stylesheet" type="text/css">
<script src="common.js?20060425" language="javascript" type="text/javascript"></script>
cssやjsを更新した際はクエリ文字列を変更します（20060425→20060426）
<link href="common.css?20060426" rel="stylesheet" type="text/css">
<script src="common.js?20060426" language="javascript" type="text/javascript"></script>
「common.css?20060425」はキャッシュされていますが、
「common.css?20060426」はキャッシュされていないので、
キャッシュは使用されず、サーバ側の「common.css」が実行されます。
クエリ文字列の内容は特に処理に影響は与えないので、
何を付加してもかまいませんが、日付やバージョンをつけるのが
管理しやすいです。
コメント
2006年04月25日 20:34 ikkan
現実の話で困ってました
ぶっちゃけ、別名CSSファイル作ってましたよorz
さっそく試してみます
2006年04月26日 07:05 yuki
間違いやアドバイスがあればフォローをお願いしますね。
2008年03月13日 11:44 nori
'＜meta http-equiv="pragma" content="non-cache"＞
javaでのキャッシュ制御と、HTMLでの制御と違いはないものなのでしょうか？
どちらの方がメリットとかあるのか分れば教えていただけませんか？
2008年03月13日 19:06 yuki
■クエリ文字列による制御（このエントリの方法）
・キャッシュがほぼ抑止できる（抑止できない条件があるかもしれないが私は知らない）
■metaタグによる制御（noriさんが記載されている方法）
・条件によってキャッシュを抑止できない
と理解しております。
ちなみにmetaタグのスペルを間違われています。
＜参考＞
http://www.tagindex.com/html_tag/page/meta_06.html
2008年03月18日 00:45 ikkan
この2年はなかなか濃ゆい2年だったわ。
metaタグだと、proxyがあると抑止できないと思います。
当時の開発環境もproxyがあってmetaタグではダメでした。
クエリ文字列だと大丈夫でしたね。
このときのシステム、今はどうなってるんだろ(；´∀｀)