一番おすすめの方法（Version番号を付ける）
静的サイトではこれが定番です。
例えばCSSやJSを読み込むときに
<link rel="stylesheet" href="style.css?v=1.0.0">
<script src="script.js?v=1.0.0"></script>
更新したら
<link rel="stylesheet" href="style.css?v=1.0.1">
<script src="script.js?v=1.0.1"></script>
のように変更します。
ブラウザから見ると
style.css?v=1.0.0
と
style.css?v=1.0.1
は別ファイルなので、必ず再取得します。
HTML自体もキャッシュされる場合
今回のお話は
https://garcharis.works/
の index.htmlそのもの が更新されないということですよね。
この場合はVersion番号は付けられません。
方法は3つあります。
方法① サーバー側でCache-Controlを設定（おすすめ）
Apacheなら
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "0"
</FilesMatch>
.htaccess に追加します。
HTMLだけキャッシュ確認を行い、画像やCSS・JSはキャッシュを利用する設定です。
<IfModule mod_headers.c>
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=0, must-revalidate"
</FilesMatch>
</IfModule>こちらの方が
- 更新はすぐ反映
- 通信量も少ない
のでバランスが良いです。
方法② ETagを利用する
Apacheなら
FileETag MTime Size
Nginxなら
etag on;
更新日時が変わればブラウザが新しいHTMLを取得します。
方法③ HTMLのURLを変える
例えば
/
ではなく
/index-v2.html
にする方法です。
これは最終手段ですね。
画像もキャッシュされます
<img src="./simple-paint-ocr/Simple-Paint-OCR-icon.webp">
画像を差し替えた場合も
<img src="./simple-paint-ocr/Simple-Paint-OCR-icon.webp?v=2">
のようにすると確実です。
JavaScriptも同じ
例えば
<script src="main.js"></script>
なら
<script src="main.js?v=20260701"></script>
にします。
ちなみに現在のHTMLでは
CSSは
<style>
としてHTML内に埋め込まれています。
JavaScriptも
<script>
としてHTML内に直接書かれています。
つまり、
- CSSのキャッシュ
- JavaScriptのキャッシュ
はほぼ問題にならず、index.htmlそのもののキャッシュが原因である可能性が高いです。
静的サイトなら次の組み合わせが最も管理しやすいです。
- HTML：
.htaccessでCache-Control: no-cacheを設定 - 画像：
?v=20260701のようなバージョン番号を付ける - CSS・JS（外部ファイル化した場合）：同様に
?v=20260701を付ける
これなら更新時に「反映されない」という問題がほぼなくなります。
コメント