[JavaScript] Cache Busting用に一定時間で更新されるクエリを作成する方法

Cache Bustingとは

下記のようにURLに意味のないクエリを付与して、キャッシュコントロール行うことを「Cache Busting」と呼ぶ。

<link href="style.css?20171221" rel="stylesheet">
<script src="script.js?20171221"></script>

---

方法

HTML上でクエリを付与するのであれば、バックエンドの処理で付与したり、アセットパイプライン、タスクランナーなどで付与すれば良い。
ただ、JS内の処理だと何らかの方法でクエリを付与する必用がある。

必須ライブラリ

• Moment.js | Home

ライブラリを使用せずピュアな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分毎にクエリが更新されるようになる。