cssやjsを更新した時にブラウザに残っているキャッシュを確実に更新する方法

cssやjsを更新した時にブラウザに残っているキャッシュを確実に更新する方法 JavaScript

cssやjsを更新した時に、ブラウザにキャッシュが残ってしまって、正しく動作しなくなるのを防止する方法を紹介します。

不特定多数の人が利用するシステムを運用しているときにブラウザのキャッシュにcssやjsファイルが残ってしまうと、正しくサイトが表示されないなどの不具合が発生してしまうことがあります。全員にCtrl+F5を押して更新して!とは言えないので、場合によってはかなりクリティカルな問題になってしまうかもです。

不要なキャッシュ問題を解決してしまいましょう。

 

■ファイル名の後ろに?var=日付みたいなのをつける

以下のサンプルの様にver=XXXXXのようなパラメータを付けておきます。

<script type="text/javascript" src="/js/hoge.js?ver=20151224"></script>

<link rel="stylesheet" type="text/css" href="/css/style.css?ver=20160117"/>

 

そして、対象のcss/jsを更新した時にver=の数値の部分を今までと違う数字に変更してあげます。私はわかりやすくリリースした日付を設定するように指定しています。
このようにすると、数値が同じときはキャッシュが利用され、数値が更新されると新しいファイルが読み出されます。キャッシュが残って正しくサイトが表示されないなどの悲しみから解放されるかと思います。

では。参考にしてみてください。