WEBサイトでユーザーにキャッシュをさせない方法

Question

WEBサイトで、お客様からのお問い合わせ内容の原因がキャッシュが残っていることが原因なことが多い状態をどうにかしたいと思ってます。

他の方のブログなどで調べて、

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

をヘッダーに記述する方法があり、試してみたのですが、やはりお客様からのキャッシュ問題は解決されません。
WEBサイトの顧客様が高年齢でPCなれしていない事もありますが、それを制作側でキャッシュが残らないようにできないのもかと、電話対応の方から言われました。

上記の方法以外になにか対策はないでしょうか？
ご教授お願いします。

Comments

[maisumakun]

キャッシュが残って問題になるのは、HTML部分でしょうか、それともJavaScriptやCSSなどのアセットでしょうか？

[tt_360]

HTML部分です！

[kunai]

具体的に何がキャッシュされると困るのかを書いてもらえないと、回答がまるで変わってしまいます。
画像が更新されないとか、フォームに入力値が残るとか

[tt_360]

リンク先のエクセルがキャッシュにより去年のものが開いてしまうので、今年のものにリンクさせたい
トップページのリンク先を常に最新のものにさせたいですm(__)m

[maisumakun]

Excelは「ファイル名が同じで中身だけ更新している」のか「変更に合わせてファイル名も変えている」のか、どちらでしょうか。

[tt_360]

変更に合わせてファイル名も変えていますm(_ _)m

[set0gut1]

エクセルのファイル名を変えているのに、旧ファイルへのリンクがユーザに見えてるらしいってことですよね。であればクエリストリングを付与する方法は効果ないと思います。
クエリストリング付与は「ファイル名が変わらず内容だけ変わったケースで、ファイル名が変わったように見せかけてキャッシュを回避する方法」なので。

Answer 1

リンクのケツに常に異なるクエリストリングをつけてあげればよろし。

<script>
var d = new Date();
function link(link) {
	var url = link.dataset.url;
	location.href=url+'?'+d.getMilliseconds();
}
</script>
<a href="#" data-url="test.html" onClick="link(this)">Excel</a>

Comments

[tt_360]

ご回答ありがとうございます。
これはリンクを更新するたびに毎回scriptも変更しなくてはならないでしょうか？できれば、scriptは変更せずにリンク先のコードのみの変更にする方法はないでしょうか？お手数おかけしますがm(_ _)m

Answer 2

kunaiさんがおっしゃるリンクにクエリパラメータをつけるのが、方法として一番よろしいかと思います。

kunaiさんのご回答から発展させて、スクリプトの変更はしなくてもいいようにしたものならいかがでしょうか。

<a href="test.html" class="paramLinker">Excel</a>
<script>
var d = new Date();
var paramLinker = document.querySelectorAll('.paramLinker');

for (var i = 0; i < paramLinker.length; i++) {
  var hrefBefore = paramLinker.item(i).href;
  paramLinker.item(i).href = hrefBefore + '?' + d.getMilliseconds();
}

</script>

これならば、htmlの方でリンクを更新しても、スクリプトの方はいじらなくても、
常にリンク先のクエリパラメータが変わるので、キャッシュが残らないかと思います。

Comments

[tt_360]

なるほど！！ありがとうございます！すごく助かりました！！