2023年06月07日更新

ウェブページのCSSを変更してクライアントにキャッシュクリアを強いるのはもう辞めにしよう！

どうも、クラゲジュニアです。

ウェブページにてHTML/CSSを更新して、以下のやり取りを行ってませんか？

🧑🏻‍🔧開発者「ウェブページ更新しました！」
🙎🏻クライアント「変わってないんだけど？」
🧑🏻‍🔧開発者「スーパーリロードお願いします！」
🙎🏻クライアント「PC側はできたけど、スマホ側はどうやんの？」
🧑🏻‍🔧開発者「閲覧履歴データの削除よろしくっす！」
🙎🏻クライアント「えー」

PCブラウザはShift + 更新で簡単にスーパーリロードできますが、スマホのブラウザはそのような機能はありません。閲覧履歴データを削除することで可能ですが、操作が面倒であることと、全ての閲覧履歴データを消去することは他のサイトの使い勝手にも影響がでます。

特にリリース後の変更の場合、そもそもエンドユーザーにはこの作業をお願いできないし、新しいHTMLファイルと古いCSSファイルの組み合わせで不整合が生じ、最悪使い物にならないページになってしまう場合があります。

対策

HTMLファイルでのCSS読み込みに、適当なURLクエリパラメーターを付けるだけです。

URLクエリパラメーターとは、サーバーに情報を送るためにURLの末尾に付加する文字列のことで、?をURLの末尾につけ、その後に文字列を付けます。

HTMLファイルのlinkタグでCSSを読み込んでいると思いますが、href属性の最後に何らかの文字列を付け、今後またCSSを更新した際はクエリを今までに使ってない文字列に変更すればOKです。

<head>
    <!-- バージョンの例 -->
    <link rel="stylesheet" href="./style.css?ver2">
</head>

例えば、バージョンをつけてCSS更新の度に増加させたり、日付で管理するのも良いかと思います。

<head>
    <!-- 日付の例 -->
    <link rel="stylesheet" href="./style.css?220607">
</head>

これで煩わしい「キャッシュクリア」と決別しましょう！

以上です。