Webサイトを更新した時に、画像やCSSやJSのキャッシュを無視して表示する方法です。
WebサイトのクライアントワークでWebサイトを修正した時に、最新のファイルをアップロードしているにもかかわらず、クライアントに変わってないと言われた経験はありませんか？
自分の環境では確実に更新されている場合はキャッシュのせいである確率が高いですよね。
リテラシーの高いクライアントであれば、キャッシュをクリアして表示してくださいで伝わるのですが、リテラシーの低いクライアントだとキャッシュの削除はまだしも、Ctrl+F5などもできないなんてこともありますよね・・・。
そんな時や、そもそも更新時には最初からキャッシュ無しで読み込ませたい時に便利な方法です。
Contents
ファイルURLの末尾にパラメータを追加する
たったこれだけです。
パラメータはなんでもいいのですが、パラメータを付与することで、新しいファイルとして新たに読み込むことができます。
更新するごとにパラメータを変える必要があるので、更新日時を付与するのが良いと思います。
実際のコード
/* CSS */
<link rel="stylesheet" href="style.css?update=20190401">
/* Javascript */
<script async src="script.js?update=20190401"></script>
/* img */
<img src="image.jpg?update=20190401" alt="">PHPでファイルの更新日時を取得してパラメータを付与する
いちいち更新するごとにパラメータを変えるのは面倒なので、PHPでファイルの更新日時を取得して、パラメータに自動付与すると便利です。
Javascriptに動的に更新日時を追加して出力する
<?php
// Javascript
function get_js($filename) {
if (file_exists($filename)) {
$time = date ("YmdHis", filemtime($filename));
echo '<script async src="'.$filename.'?update='.$time.'"></script>';
} else {
return false;
}
}
?>
<?php
// 出力
get_js("script.js");
?>CSSに動的に更新日時を追加して出力する
<?php
// CSS
function get_css($filename) {
if (file_exists($filename)) {
$time = date ("YmdHis", filemtime($filename));
echo '<link rel="stylesheet" href="'.$filename.'?update='.$time.'">';
} else {
return false;
}
}
?>
<?php
// 出力
get_css("style.css");
?>画像に動的に更新日時を追加して出力する
<?php
// Image
function get_img($filename) {
if (file_exists($filename)) {
$time = date ("YmdHis", filemtime($filename));
echo '<img src="'.$filename.'?update='.$time.'" alt="">';
} else {
return false;
}
}
?>
<?php
// 出力
get_img("image.jpg");
?>まとめ
この方法でクライアントとの「更新されてないです」→「キャッシュのせいなのでCtrl+F5で更新してください」の件がなくなったのですごく効率的になりました。
制作中もいちいちキャッシュを読んだりしなくなるので、デフォルトでこの方法にしておけば、制作スピードも上がること間違いないです。
ここまで読んでいただきありがとうございました。