令和元年9月20日

キャッシュの所為で更新しても反映されないファイルを強制的に更新させる!

諸悪の根源 その名は『キャッシュ』!!

WEBデザイナー、またはそれに準ずるコーダーや、趣味でサイトを制作している人ならとても誰でもこんな経験をしたことがありますよね。

あれ? サイト更新したのに反映されてない……。
(゜_゜>)

今回の記事はそんな時の為の、『すぐに更新後のファイルの内容が更新されるコード』を紹介します!

CSSやJavaScriptを更新したのに実際にページ上では変化なし…。
何回か更新連打するとようやっと更新後の内容が反映される。

これはキャッシュという、一度見たページ情報を保存し、次に同じページを閲覧する時にそこに保存しているデータを優先的に呼び出してページの読込を早くするという、(有難迷惑な)特別仕様が原因で発生する現象です。

この仕組み自体は、ユーザー側にとってはサイトのページが開く速度が上がるのでありがたい仕様なんですが、制作者にとっては更新したファイルがすぐに更新されず微妙にもたついてしまうという若干困ったモノになります。

PHPで更新日付を取得して常にファイルの状態を最新に!

キャッシュが発生して更新内容が反映されない原因は『既に存在するファイルを上書き保存』してしまうからです。

ならば、逆に別ファイル名にしてしまえば、キャッシュは有効化されず更新内容が即ページに反映されます!

というわけ、下記のPHPを利用して早速ファイル名の更新日時を取得して、自動的にリンクに挿入するソースコードを追加しました。

これで、参考例のCSSのリンクは./_assets/css/style.css?date=20190920034804 になり、こんな名前のファイルはキャッシュ上には存在しない扱いになるので、強制的に更新が反映されます!

非常に簡単なので、キャッシュで困っている人は是非やってみてください。

最後まで読んでいただきありがとうございます。
今回の記事が気に入ったら、是非下記ボタンよりシェアをよろしくお願いします。