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

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

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

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

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

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

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

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

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

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

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


実はこのクエリの部分の文字列を変更することで、
ブラウザに違うURLだと認識させて強制的にキャッシュを更新できる
そうです。

よって、先程の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
スポンサーリンク

まとめ

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

.jsファイルのキャッシュで困っている方の参考になれば幸いです。
技術tips
スポンサーリンク
一般広告: モバイルバッテリー
スポンサーリンク
Aresei-note
タイトルとURLをコピーしました