.jsファイルのキャッシュを強制的に更新させる方法 | JavaScript / jQuery

※当サイトはアフィリエイト広告を利用しています。

.jsファイルのキャッシュを強制的に更新させる方法 | JavaScript
先日、リタイアシミュレターなる自作ツールをPHP+JavaScriptで作成し公開したました↓↓↓
その際に「スマホおよびタブレットにて.jsファイルを更新したのに動作が変わらない!!」という現象に見舞われました。

原因としては.jsファイルがブラウザにキャッシュされて更新が有効にならなかったようです。

ここで問題なので自分のスマホであればキャッシュを削除すれば更新を適用することができますが、ユーザのスマホの場合、いちいちキャッシュのクリアをお願いする訳にはいきません。

なにか.jsファイルを強制的に更新する方法はないのでしょうか?

ウェブで調べたところ解決方法を見つけましたのでここにまとめておきます。
スポンサーリンク


.jsファイルのキャッシュを強制的に更新させる方法

.jsファイルのキャッシュを強制的に更新させるにはクエリを使用します。

以下が例です。
<script src="./hogehoge.js?value=1"></script>

「value=1」の部分をクエリと呼びます。

クエリの本来の役割としては、上記の例でいくと、.jsファイルにvalueという変数名で1というデータを渡すような機能です。


実はこのクエリの部分の文字列を変更することで強制的にキャッシュを更新できます。

よって、先程のvalue=1のURLでキャッシュが作成されても、以下のようにクエリの部分の文字列を変更することでキャッシュが更新されます。
<script src="./hogehoge.js?value=2"></script>

オススメの使い方

オススメの使い方としてはクエリの文字列が絶対に衝突しないように、日付+時間としてしまうことです。

例えば2019/10/20 10:30に.jsファイルを更新したら以下のようにクエリを設定してしまいます。
<script src="./hogehoge.js?time=201910201030"></script>

こうすることで絶対に衝突を避けることができます。

参考ページ

以下のサイトを参考にさせていただきました。
https://netamame.com/cache-busting

(参考) WordPressで毎回クエリ文を変更するが面倒な場合

WordPressに自作JavaScriptファイルを使用していて、毎回JavaScriptファイルを更新する度に、URLクエリを変更するのは少し面倒です。

そんなときはユニークなURLクエリを自動で付与するショートコードを作成すると便利でオススメです。

詳しくは以下の記事で紹介していますので、活用してみてはいかがでしょうか?

まとめ

この記事では.jsファイルを強制的に更新させる方法を紹介しました。

.jsファイルのキャッシュで困っている方の参考になれば幸いです。