ブラウザキャッシュとの戦い

しつこいchromeのキャッシュ

CSSの編集が、ブラウザのリフレッシュでも反映されずイライラして、chromeの「その他のツール」>「閲覧履歴の消去」でキャッシュを強制削除する事が多い。これをやるとgmailなどにもいちいちログイン仕直さねばならず本当に面倒だし、いつか仕事を請け負った際には、クライアントとのやり取りも大変そうだ。

キャッシュを削除することなく、CSSやJavaScriptの編集を確実に反映させる方法について調べたので、メモしておく。

URLに更新日時のクエリ文字列を追加

更新したCSS・JS・画像のパスに、GETパラメータ(クエリ文字列)を付与するCache Bustingという方法がよく使われているようだ。

 <link rel="stylesheet" href="css/style.css">

に、「? + 任意の文字列」を付与すると、ブラウザは異なるURLだと認識して、キャッシュを読まずに、更新されたファイルを新たに読みに行く。

付与する文字列は、バージョンやランダムな数値など、何でもよいとのことだが、わかりやすくまた、後々何かと役に立ちそうなので、更新日時にしておく。

 <link rel="stylesheet" href="css/style.css?m-date=201910230914">

WordPressの場合はdate()を使う

header.php のlink読み込み部分でPHPのdate()を使って、ページ生成時の日時をUnix時間（1970年１月１日０時０分０秒を基点とした秒数）で出力する。

<link rel="stylesheet" 
href="<?php echo get_stylesheet_uri(); ?>?ver=<?php echo date('U'); ?>">

これで、ブラウザはページをロードするたびにstyle.cssが新しくなったものと認識し、キャッシュを読まずにサーバー上のstyle.cssを読み込むようになる。

これで、ものすごくストレスが減りそうな気がする！