リロードする度に新しい情報を提供するサイトを作る時に、ページの読み込みを高速にするキャッシュ機能があると邪魔なので無効にしたいのですが、昔ながらのHTMLタグが使えなくなっているので調べてみました。
窓の杜ニュースによるとGoogle ChromeのHTML5デフォルト化が2017年に実施されたようで、他のブラウザも追随しており、以前のように下記のHTMLタグをヘッダーに挿入しても効果がなくなっています。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">でキャッシュ無効の代替案として調べたところ、以下の手段が見つかりました。
① HTTPレスポンスヘッダーにてCache-Controlディレクティブを用いる
キャッシュを無効化したいサイトやページをPHPやPerlなどのCGI（ってまだいうのかな？）で作っているのであれば、HTTPヘッダーにCache-Controlディレクティブを挿入するのが簡単です。
// キャッシュの無効化
header('Cache-Control:no-store, max-age=0');② .htaccessファイルでキャッシュの無効化
特定のディレクトリ以下のキャッシュを無効化したいのであれば、.htaccessファイルに以下のコードを挿入する方法があります。
# かっこ内にキャッシュを無効化したいファイルの拡張子を|で追加する
<Files ~ "¥.(html|php|png)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>
③ Javascriptで制御
HTMLファイルでキャッシュを無効化したい場合、「Cache Busting（キャッシュバスティング）」というテクニカルな方法を使っているページがあるようです。これはHTMLのヘッダーに挿入する<link>タグなどの属性で指定するファイルアドレスの後ろに疑似的なクエリストリング「？任意の文字」をつけることで、ブラウザにファイル内容が更新されたと誤解させる手法です。 属性なのでページの見た目は変わらず、また読み込ませる画像やCSS、Javascriptのファイルアドレスの後ろにクエリがついても正常に読みこめるので問題ないというわけです。
このアイデアを利用して、Javascriptで自動的に更新日時が追加されたURLを作成するコードを以下のようにHTMLに挿入することで、キャッシュを免れるようです。
<script>
var script = document.createElement("script");
var URL = 'http://hogehoge.com/scriptaddress.js?' + new Date().getTime();
script.setAttribute("type", "text/javascript");
script.setAttribute("src", URL);
document.getElementsByTagName("head")[0].appendChild(script);
</script>