ウェブサイト更新時にキャッシュのせいで更新されない問題を解決

「更新致しました。ご確認のほどよろしくお願いいたします。」
と、お客様に報告したあと、
「表示が変わってないんですが」とか言われてないでしょうか。

出来る限り上記のやり取りをなくすため、キャッシュを残さないようにしましょう。

パラメータをつける

CSS

例:style.min.css?2019112101

画像

例:img.jpg?2019112101

<meta>タグでno-cacheを設定する

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

※HTML4.xの場合です。HTML5は以下を行います。

キャッシュマニフェストを設定する

HTML5ではこれによりブラウザのキャッシュをコントロールします。

1.キャッシュマニフェストファイルを作成する

cache-manifest.appcache(名前は任意、拡張子は「appcache」をgoogleが推奨)ファイルを作成し、中身を以下記述。

CACHE MANIFEST

CACHE
#キャッシュさせたいファイル
https://****.com/logo.svg

NETWORK:
#キャッシュさせたくないファイル
*

コメントで記載している通り、CACHEはキャッシュさせときたいファイル(基本的に変更がないようなファイルとか)を記述し、NETWORKはキャッシュさせたくないファイルを記述します。
httpから始まる書き方をしていますが、相対パスでも大丈夫です。

2.キャッシュさせたくないhtmlファイルで読み込むようにする

<html manifest="https://****.com/cache-manifest.appcache">

これも相対パスでも問題ありません。

3.htaccessでキャッシュマニフェストファイルのコンテンツタイプを設定

.htaccessに以下を追加

AddType text/cache-manifest .appcache

 

以上です。