JavaScriptやCSSのキャッシュ問題を回避する簡単な方法

JavaScriptとかCSSを更新した時にキャッシュが消えてくれない..

Web開発をしている方なら,経験あるのではないでしょうか.
簡単な回避方法を紹介します.

それは,
JavaScriptとCSSの呼び出し時に何らかの識別子をつける,です.

サーバサイドがPHPだったとしたら,システムのバージョンなんかをdefineで定義しておいて,
JavaScriptとCSSの参照を以下のように書けばいいと思います.

こう書くと,,,

<?php
define('VERSION',    '1.0.90'); // revision番号でも何でもいいと思う
?>

<link rel="stylesheet" href="/css/common.css?ver=<?php echo VERSION; ?>" type="text/css" media="all">
<script type="text/javascript" src="/js/common.js?ver=<?php echo VERSION; ?>"></script>

こう出力される...

<link rel="stylesheet" href="/css/common.css?ver=1.0.90" type="text/css" media="all">
<script type="text/javascript" src="/js/common.js?ver=1.0.90"></script>

こうしておけば,何か変更をした時にVERSIONだけ更新すれば
ブラウザは別ファイルとして認識してくれるので必然的にキャッシュ問題を回避できる,という訳です.

今回の例だとシステムのバージョンですが,
日付でもいいしアクセス毎に乱数を付加するような実装でも同じようなことが実現できます.

ただ,キャッシュと上手くつきあうというのは大事なことなので運用を考えつつですね.