CSSファイルの変更を更新できない…　CDN利用時などにCSSのキャッシュファイルを強制リロードする方法

4,329 views

読了時間 : 約1分23秒

クライアントとしてのCSSキャッシュの利用は最悪の結果をもたらします。

CDNで利用するとまさに悪夢です。どうやってもブラウザーにCSSファイルを更新させたり変更を反映させたりできない…。

しかし、この問題にはシンプルな解決法がありますのでご安心を！

ブラウザーのキャッシュの削除を考える必要はもうありません―キャッシュバスターを使いましょう

最適な解決法はシンプルです。

キャッシュを削除したり、ブラウザーのアドオンをインストールするためにコードを変更したり、サーバーの設定を変更したりする必要はありません。ブックマーク、より正確にはブックマークレットを利用します。早速試してみましょう。

上のリンクをブックマークバーにドラッグするだけの簡単な作業をするだけで完了です！　ページがCSSをリロードしない場合、ブックマークをクリックするだけでOKです。本当かなと思ったらリンクを実際にクリックしてこの魔法を体験してください。本当にページのCSSが強制リロードされますよ。

この仕組みも簡単です。ブックマークをクリックすると、現在閲覧中のページで使用されているCSSファイルすべてを見つける数行のJSコードが実行されます。

そして、そのファイルの末尾にランダムなGET変数が追加されることでブラウザーはこのファイルをまったく新しいものと認識し、リロードします。

そうすると画面が点滅し、一瞬の間スタイルが設定されていないコンテンツが現れその後に魔法が起こります！　すべてのCSSの編集部分が表示されるのです。

ページをリロードすると、元のキャッシュファイルが再度利用されるため、変更部分は消えてしまいます（元のキャッシュがリロード中に消えてしまわない限りは）。

その場合、「CSSをリロードする」ブックマークを再度クリックする必要があります。

この記事は「How to force reload cached CSS files (even when using CDN)」を翻訳・参考にしています。