js/cssをブラウザでキャッシュさせない方法
Cahche Bustingって言うらしい。。。
その方法は、以下の通り
対策前のコード↓
sample.html
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg" alt="Sample">
対策後コード↓
sample.html
<!-- CSS -->
<link href="style.css?ver=1.0.0" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js?ver=1.0.0" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg?ver=1.0.0" alt="Sample">
「?」の後に任意の文字列を付与すると、ブラウザは対策前のURLとは違うものだと認識する。
(これをクエリ文字列という)
クエリ文字列はほかにも
・更新日時 (例：src=”style.css?date=20201027053000″)
・バージョン (例：src=”style.css?ver=1.2.3″)
・ランダム数
jsやcss側での加工はと言うと、必要ない。
これでjs/cssを更新しても、ブラウザでキャッシュされなくなる。
しかし、htmlがキャッシュされたら元も子もないので、htmlには以下のmetaを記述する。
sample.html
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
３つともキャッシュしちゃダメよ！ということらしい。
以上。