今日の作業は「htmlキャッシュ防止」です。

開発時は頻繁にhtmlやjsを変更します。ブラウザに変更を反映するにはその度にキャッシュを削除したり”スーパーリロード”が必要なのですが、面倒になってきました。

そこで常に最新ソースをロードするような仕組みを作りました。しかもphpなどサーバサイドの言語を使わず、htmlとjavascriptのみで、です。

let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();

let key = year + "_" + month + "_" + day + "_" + hour + "_" + min + "_" + sec;

let paramIndex = location.href.indexOf('?');
if (-1 == paramIndex) {
    location.replace(location.href + "?date=" + key);
    return;
} else if (location.href.slice(paramIndex + 1) !== "date=" + key) {
    location.replace(location.href.slice(0, paramIndex) + "?date=" + key);
    return;
}
・・・以降処理内容

?とそれ以降の文字列を付加してロードする方法で、これをCache Bustingと言います。こうすることでブラウザに関係なく必ず最新のソースを取って来れます。上記コードは1秒毎に新しいコードをサーバに取りに行ってくれますが、本番リリース時は1日単位くらいに調整予定です。

明日はJSもキャッシュしないようにします。

以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)