URLパラメーター(クエリ文字列)でCSSのキャッシュを自動更新させる

よこのじ(@yokonoji_work)です。

今回は、ファイルバージョンをURLのクエリーで指定して、自動でキャッシュファイルを更新させる方法です。

cssファイルやjsファイルを修正したのに反映されていないときの原因は、ブラウザがキャッシュしている古いファイルでWebページを表示しているからですね。その古いファイルを最新版に更新する方法にスーパーリロードがあります。

Win,Macブラウザでスーパーリロードする方法

しかし、この方法は手動作業が必要ですので、古いファイルで表示させ続ける人もいるかも知れません。そのため、みんなが最新の状態でWebページを見ることができるように作る側が配慮する必要があります。

URLパラメーター(クエリ文字列)

URLパラメーター(クエリ文字列)とは、Webサーバーに情報を伝えるための記述です。URLの末尾にクエスチョンマーク(?)を付けて、その後ろにパラメーターを指定します。

クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したもの。

Webアプリケーションなどでクライアントからサーバにパラメータを渡すのに使われる表記法で、URLの末尾に「?」マークを付け、続けて「名前=値」の形式で記述する。値が複数あるときは「&」で区切り、http://example.com/foo/var.php?name1=value1&name2=value2 のように記述する。

クエリ文字列 【 query string 】 クエリストリング

例えば、Googleで「URL クエリー」と検索すると、検索結果のURLに「https://www.google.co.jp/search?q=URL+クエリー~」と表示されます。これには、検索ワードや言語などの情報が含まれています。

なお、URLパラメーター(クエリ文字列)は、ページへのアクセスには影響を及ぼしません。例えば、次の2つのURLはどちらも同じページにアクセスします。今回はこの仕組を利用します。

CSSのキャッシュを自動更新させる

URLパラメーター(クエリ文字列)を付与しても、ページへのアクセスには影響しません。しかし、URL自体は異なります。これを利用すると、ブラウザに同じファイルを別のものと認識させることができます。

どういうことか、説明します。
次のコードはlinkタグでcssファイルを読み込む記述です。どちらもcontent.cssの読み込みですが、下側には「?20181124」を付与しています。

旧:<link rel="stylesheet" href="https://yokonoji.work/~~~/content.css">
新:<link rel="stylesheet" href="https://yokonoji.work/~~~/content.css?20181124">

これにより、ブラウザは「https://yokonoji.work/~~~/content.css」と「https://yokonoji.work/~~~/content.css?20181124」を別のファイルだと認識します。

つまり、旧のcssファイルを更新したときにクエリ文字列として「?20181124」を付与していれば、ブラウザはキャッシュしたことがないファイルと認識して、content.cssを再キャッシュします。こうすれば、スーパーリロードをしなくても、最新のファイルでWebページを表示させることができますね。自動で。

クエリ文字列は「?ver=1.00」のように自分で管理しやすい任意の表記で問題ありません。上記の例では変更したときの年月日を指定しています。更新するたびに異なるパラメーターであれば、良いということです。