ブラウザのキャッシュを削除した状態で確認してもらう方法【CSS・js・imgなど】

1,045view

ブラウザのキャッシュを削除した状態で確認してもらう方法【CSS・js・imgなど】

Webサイトのページを修正をした際、CSSやjs、imgを修正することはよくあると思います。
ただ困ってしまうのが、クライアントに確認してもらう際、「反映されてない」「何も変わっていない」という指摘があるパターンです。
しかし自分の環境のブラウザでは修正は反映されている…
大体はクライアントのブラウザに修正前のCSSやjsのキャッシュが残っているのが原因ですが、
クライアントに「キャッシュをクリアしてください」や「プライベートモードで開いてください」とはなかなか言えない場合もありますよね。

お仕事でWebコーダーやエンジニアをしている方は一度は経験したことがあると思います。
今回はそんな状況にならずにキャッシュを削除した状態で確認してもらう方法をご紹介します。

ブラウザのCSS・js・imgのキャッシュを削除する方法

CSSの場合

CSSはファイル名の後ろにパラメーター(?v=1.0)を付けてあげるだけでキャッシュが削除されます!

<link rel="stylesheet" media="all" href="/assets/css/main.css?v=1.0">

削除というよりかは更新が正しいかもしれませんね。
?v=1.0と書きましたが、?以降は自由に書いても大丈夫です。

たとえば
・バージョン管理 = ?v=1.0
・更新日管理 = ?20200308 
などです。

最後に更新した人の名前のアルファベットを付けたりして、自分や他の人が見てもわかりやすいようにするのもいいかもしれません。

jsの場合

jsの場合もファイル名の後ろにパラメーターを付けてあげると更新できます。

<script src="/assets/js/main.js?v=1.0"></script>

imgの場合

imgの場合もファイル名の後ろにパラメーターを付けてあげると更新できます。

<img src="/assets/imgs/company/profile/fv_img_01.jpg?v=1.0">

このようにファイル名やsrcの後ろにパラメータをつける事によって、実際にファイル名は変更していないにパラメーターが付く事によって新しいファイルとしてブラウザには認識されるため更新できます。

すぐに反映させたいときなどに便利ですので困ったときは是非試してみてください。

この記事をシェアする