WEBサイトの〇〇を修正しましたので、ご確認ください！
変更されていません
キャッシュを削除してご確認ください。
mac: command + shift + r
windows: ctrl + F5
確認できました。
このやりとりが無駄すぎる！
ということで今回は、WEBサイトの更新時にCSSやJavaScriptファイルにパラメータを付与して、キャッシュを自動削除する方法を解説する。
たった5行のJavaScriptで実装できるので、制作現場から「キャッシュを削除してご確認ください」というやりとりが消えることを願っている。
実装（JavaScript）
(function() {
const current_time = new Date().getTime()
let css_link_tag = document.createElement('link');
css_link_tag.setAttribute('rel', 'stylesheet');
css_link_tag.setAttribute('href', './style.css?ver=' + current_time);
document.head.appendChild(css_link_tag)
}())以上！
解説
1. パラメータ用のデータを取得
const current_time = new Date().getTime()2. linkタグを作成
とりあえずcreateElementで要素を作る。
let css_link_tag = document.createElement('link');3. linkタグに属性を付与
hrefを指定する際に、’./style.css?ver=’ + current_timeとすることでファイル名の後にパラメータが付与される。パラメータはページロード時の現在時刻にしている。
パターメーターのデータは動的に切り替わるなら何でもOK。例えば、ランダムな文字列出力とかでも良さそう。
css_link_tag.setAttribute('rel', 'stylesheet');
css_link_tag.setAttribute('href', './style.css?ver=' + current_time);4. head直下に描画
appendChildでheadタグ直下にタグを挿入してあげれば無事完了。
document.head.appendChild(css_link_tag)【番外編】Vue.jsの場合
こんな感じかな？
export default {
created() {
this.initCss()
},
methods: {
initCss() {
const current_time = new Date().getTime()
let css_link_tag = document.createElement('link');
css_link_tag.setAttribute('rel', 'stylesheet');
css_link_tag.setAttribute('href', './style.css?ver=' + current_time);
document.head.appendChild(css_link_tag)
}
}
}
