CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする
2022/02/26
CakePHP4、CakePHP3のCSS、JavaScript、画像のブラウザへのキャッシュの設定方法
ブラウザが CSS、JavaScript、画像をキャッシュする仕組み
ブラウザは、表示している Webサイトで使われている CSSや JavaScript、画像をキャッシュして Webサイトの表示を高速化しようとします。
そのため、場合によってはサーバの CSSや JavaScript、画像が更新されていてもブラウザがキャッシュしている情報が使用されて、Webサイトが正しく表示、処理されない場合があります。
そんな時は、キャッシュをクリアして強制リロードするために「Ctrl+F5」などをするわけですが、Webサイトを利用しているすべてのユーザがキャッシュに対する理解があるわけではないため、CSSや JavaScript、画像が更新されたら、ブラウザのキャッシュも更新してほしいと思うでしょう。
CakePHP4にはブラウザのキャッシュを更新する仕組みが実装されている
そんなキャッシュを更新する機能が CakePHP4には実装されているのですが、デフォルトでは使用しない設定になっています。
ですが、個人的にはほとんどの場合は常に更新する設定にしておく方がいいだろうと思います。
ちなみに、記事では「CakePHP4」と記載していますが、「CakePHP3」でも全く同じ機能が実装されています。
「CakePHP4」のところを「CakePHP3」と読み替えても問題ありません。デフォルトの設定も同じです。
CakePHP4のブラウザのキャッシュを指定する設定方法
/config/app.php を編集
/config/app.php
の 90行目前後を、下記の通り「'timestamp' => 'force',
」とします。
1 2 3 4 5 6 7 8 9 10 11 12 |
// デフォルトの設定 'Asset' => [ //'timestamp' => true, // 'cacheTime' => '+1 year' ], // 強制的にリロードする設定 'Asset' => [ 'timestamp' => 'force', //'timestamp' => true, // 'cacheTime' => '+1 year' ], |
表示される HTML
この設定をすることで、例えば cssのリンク情報が下記のように変更されます。
1 2 3 4 5 |
<!-- デフォルトの表示 --> <link rel="stylesheet" href="/css/login.css"/> <!-- 強制的にリロードする際の表示 --> <link rel="stylesheet" href="/css/login.css?1645536142"/> |
「login.css」に続く「1645536142」は、「login.css」のファイルの更新日時(タイムスタンプ)の UnixTimeです。
ブラウザは「/css/login.css?1645536142」全体がファイル名として認識します。
「login.css」ファイルを更新すると「1645536142」の部分が変更されるため、ブラウザは「login.css?1645536142」ではなくなったと認識して再読み込みを実行する、という仕組みになっています。
この設定をしておかないと、「login.css」を変更してもブラウザが「login.css」を再読み込みしてくれるかどうかはブラウザ次第になってしまうため、サイトの運営者が望む状況になっていない場合も発生するわけです。
CakePHP4 の asset の設定による動作
というわけで、ほとんどの場合は「'timestamp' => 'force',
」としておくべきだと思います。
「'timestamp' => 'force',
」としても、ページを表示するたびに毎回 CSSや JavaScript、画像を再読み込みするようになるわけではありません。ファイルが更新された日時を表示するため、更新日時が変わらない限り再読み込みはされません。その点は安心です。
ですが、ページを表示する際に、CSSや JavaScript、画像の更新日時を取得して、それを付与して HTMLを生成する、という処理になりますので、その処理の分だけ若干処理が増えてはいます。
CakePHP4で /config/app.phpの assetの設定の詳細
CSSや JavaScript、画像のキャッシュをする、しないの設定は下記の 3つあります。
1 2 3 4 5 6 |
// デフォルトの設定 'Asset' => [ 'timestamp' => 'force', //'timestamp' => true, //'timestamp' => false, ], |
「false」はデフォルトの設定です。
「timestamp」を指定しないときは「false」が設定されているものとして、下記のように何も付与しない状態で cssが読み込まれます。
1 2 |
<!-- デフォルトの表示 --> <link rel="stylesheet" href="/css/login.css"/> |
「true」と「'
force'
」の場合は、下記のように読み込むファイル名に加えて、ファイルの更新日時の UnixTimeが編集されます。
1 2 |
<!-- 強制的にリロードする際の表示 --> <link rel="stylesheet" href="/css/login.css?1645536142"/> |
「true」と「'
force'
」の違いは、「true」は「debug」モードが「true」の場合のみ付与します。
「'
force'
」の場合は「debug」モードに関係なく常に付与します。
「'
force'
」を指定するときの注意点としては、「force」は文字列ですので「'
(シングルクォート)」「"
(ダブルクォート)」のどちらかで囲む必要があります。(「true」「false」は「Boolean」ですので「'
」などで囲む必要はありません。)
ちなみに、「force」を「'
」などで囲まなくても「Notice」は出力されますが、タイムスタンプを編集する処理は正しく動作はします。
「debug」モードは、開発環境では「true」にして、本番環境では「false」にしていることが多いと思いますので、「'timestamp' => true,
」は(変更する頻度が高い)開発環境では付与する、と言い換えてもいいでしょう。
でも、本番環境こそ Webサイトを使うユーザの行動を規定できないわけですので、サーバ側で強制的にキャッシュを書き換えるような設定にしておくべきだと思います。
CakePHP4 Cookbook 構成設定
https://book.cakephp.org/4/ja/development/configuration.html#general-configuration
CakePHP3 Cookbook 構成設定
https://book.cakephp.org/3/ja/development/configuration.html#id4
CakePHP4でキャッシュする時間を設定
キャッシュする時間「max-age」「Expire」を設定する方法
前項で紹介した「timestamp」では、ファイルの更新日時の UnixTimeを付与するか、しないかの設定でしたが、ブラウザにキャッシュする時間を設定する「cacheTime」を設定することもできます。
1 2 3 |
'Asset' => [ 'cacheTime' => '+1 year' ], |
上記のように「cacheTime」をキーとしてキャッシュする時間を設定します。
デフォルトでは「+1 day(1日)」が設定されています。
上記の例では「+1 year」が設定されていますので、「1年」ということになります。
設定は、下記の PHPの strtotime関数の書式で設定します。
https://www.php.net/manual/ja/function.strtotime.php
また、HTTP ヘッダー Cache-Control の max-age と HTTP ヘッダーの Expire について確認したい場合は下記のページなどが参考になるかと思います。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Expires
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
-
CakePHP3のfriendsofcake/searchでツリーカテゴリーの子階層も含めて検索する方法
CakePHP3のツリービヘイビアを使ったツリーカテゴリーの子階層も含めての検索を検索プラグイン「friendsofcake/search」を使って実現する方法を解説しました。
-
-
CakePHP 2.3 Search Pluginで検索処理 その6ORDER、sortソートの機能
CakePHPの検索プラグイン Search Pluginの検索処理の中で order、ソートについての解説です。
-
-
CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い
CakePHP3のシェルスクリプトを作成し、コマンドラインから実行する方法を解説。複数単語をつなげる場合の対応方法がCakePHP2より制限が厳しくなったのでCakePHP3の命名規則の確認が必要だ。
-
-
CakePHP 2.3で確認画面付きのお問い合わせフォームの作り方
CakePHPで確認画面付きのお問い合わせフォーム、メールフォームの作り方をサンプルを提示しながら解説。
-
-
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその2でバリデーションなどの実用的なカスタマイズ方法を解説。
-
-
CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法
CakePHP3のユーザ管理、ログイン認証プラグイン「CakeDC/Users」の権限管理を行う方法やアクセスできるコントローラー、アクションを設定、所有権を持つレコードのみ更新できる設定方法を解説。
-
-
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその1で基本的な導入方法の解説で読みながら簡単に導入が可能。
-
-
CakePHP3の検索プラグイン「friendsofcake/search」の様々な検索の仕方の実装方法
CakePHP3で検索をするプラグイン「friendsofcake/search」の検索条件のカスタマイズ方法の解説。検索項目を増やしたり、以上、以下での検索や、チェックボックスによる検索の方法などを解説。
-
-
CakePHP3で静的ページの作成は webrootか pagesを使う。トップページを参考に解説
CakePHP3で静的なページを設置する場合の方法(webrootとpagesとを活用する方法)を解説。pagesの解説はデフォルトのトップページがどう表示されているかを参考に解説。ルーティングの機能も。
-
-
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその3で記事を更新する際のファイルの取り回しなどについてを解説。