無駄な読み込みをさせないためにブラウザは訪問したウェブページをキャッシュします。
しかしコンテンツを更新したときや、ウェブアプリの場合には困ります。
HTML&CSS&JavaScript連携バージョンが合わないと動作不定になる場合もあります。
ユーザー側で出来ることは、ウェブページのリロードです。ブラウザによってもキャッシュの削除方法が異なるのでややこしい。
Chrome
Chromeのキャッシュは強力です。そのキャッシュを確実に消す方法は「F12 → 更新マークをマウスで長押し → キャッシュと消去とハード再読み込み」です。
リロードで無効になるキャッシュ削除もあります。操作方法は「Shift + 更新マーククリック」「Ctrl + 更新マーククリック」「Shift + F5」「Ctrl + F5」「Ctrl + Shift + R」などがあります。この方法では必ずしも新しいページが読み込まれるとは限りません。
確実にリロードさせたいなら、デベロッパーツールを開いて、再読み込みを長押しすると「キャッシュの消去と再読み込み」という選択肢が現れるので、それを選択すると確実にキャッシュが削除いされて、再読み込みが行われます。ただし、この方法は一般向けとは言い難い。
Androidでは面倒な設定から削除するしかないので少々面倒です。
Firefox
リロードでキャッシュ削除する操作方法は「Ctrl + Shift + R」「Ctrl + F5」です。この方法では必ずしも新しいページが読み込まれるとは限りません。
Firedoxでキャッシュを確実に消す方法は「オプション → プライバシーとセキュリティ → Cookie とサイトデータ → データ消去」です。なお全ウェブページのキャッシュが消えます。
なおFirefoxは長時間使い続けるとキャッシュが消えなくなる現象が発生しますので、時々Fireroｘを止めて再起動しないと駄目です。
Androidでは面倒な設定から削除するしかないので少々面倒です。
コンテンツ側でキャッシュを回避する考慮
キャッシュさせないメタタグはHTML5ではNG
メタタグで
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
と言いたいところですが、残念ながらHTML5では無効な指定です。それでもブラウザは解釈してくれるかもしれません。
仕様では“<!DOCTYPE ～”でHTML4.x以前であることをブラウザに知らせた時のみです。
HTML4.x以前でもブラウザによってキャッシュの考え方が違っていました。
HTTPヘッダでブラウザキャッシュを阻止
PHPなどのサーバー側でHTML生成を行うなら
PHPなどのサーバー側のプログラムを利用しているなら、HTTP HeaderでExpires(有効期限)が簡単に吐き出せるので、キャッシュを無効化させるの事が容易です。
ウェブアプリはほぼ必須な考慮です。
静的なHTMLページ
静的なホームページなら、.htaccessに以下を記述して、HTTP Headerを追加する方法もあります。
<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>
残念ながら利用しているレンタルサーバーによっては、インターナルエラーになる場合があります。
またアクセスが多いサイトではお勧め出来ません。
CSSやJavaScriptファイルの読み込み
cssやjsファイルを変更を反映したい時には
<link rel="stylesheet" href="./css/_web.css?210831120000" type="text/css">
<script src="./js/_web.js?210831120000"></script>
この様にブラウザにキャッシュと別物だよと知らせることで、cssやJavaScriptが反映されないという事態が回避できます。
ウェブアプリの場合は、URL引数に乱数のダミー引数をセットして、常にリロードされる様にします。
しかしChromeではこのURL引数を変化させても、無視してキャッシュから読み込むケースがある様です。
XHRでデータ読み込みのキャッシュ回避
「'～URL文字列～?' + String((new Date()).getTime())」という具合にUNIX時間を付加してキャッシュから読み込まれるのを回避しています。