[JavaScript] Cache Busting用に一定時間で更新されるクエリを作成する方法
Cache Bustingとは
下記のようにURLに意味のないクエリを付与して、キャッシュコントロール行うことを「Cache Busting」と呼ぶ。
<link href="style.css?20171221" rel="stylesheet">
<script src="script.js?20171221"></script>
方法
HTML上でクエリを付与するのであれば、バックエンドの処理で付与したり、アセットパイプライン、タスクランナーなどで付与すれば良い。
ただ、JS内の処理だと何らかの方法でクエリを付与する必用がある。
必須ライブラリ
ライブラリを使用せずピュアなJSだけで実装は可能だが、日付を操作するのは大変なので今回は Moment.js を使用する。
コード
function createCacheBusting(thresholdMinutes) {
var minutes = thresholdMinutes || 15;
var start = moment();
var remainder = minutes - start.minute() % minutes;
return moment(start)
.add("minutes", remainder)
.format("YYYYMMDDHHmm");
}
//////
var cacheQuery = createCacheControl();
fetch(`${url}?${cacheQuery}`)
.then(function(data) {
// process data
});
引数なしだと「201712211715
」みたいな感じで15分毎にクエリが更新される。
引数のthresholdMinutes
に30
や60
を渡すことで30分毎・60分毎にクエリが更新されるようになる。