ブラウザキャッシュの制御

Webアプリ側からクライアントのブラウザキャッシュを制御する方法です。



















＜ブラウザキャッシュの制御＞



①HTMLのmetaタグで制御

　　<meta http-equiv=”Pragma” content=”no-cache” />

　　<meta http-equiv=”cache-control” content=”no-cache” />

　　<meta http-equiv=”expires” content=”0″ />



　　この方法だとJavaScirpt/CSS等のキャッシュコントロールができないため、

　　JavaScript等の変更がクライアント側に反映されません。



②js/cssリンク定義にクエリ文字列を付加する


　　<link href=”common.css?000001″ rel=”stylesheet” type=”text/css”>

　　<script src=”common.js?000001″ language=”javascript” type=”text/javascript”></script>



　　JavaScript等を変更した場合にクエリ文字列を変更します。



　　<link href=”common.css?000002″ rel=”stylesheet” type=”text/css”>

　　<script src=”common.js?000002″ language=”javascript” type=”text/javascript”></script>



　　「common.css?000001」はキャッシュされていますが、

　　「common.css?000002」はキャッシュされていないので、

　　キャッシュは使用されず、サーバ側の「common.css」が実行されます。



　　クエリ文字列の内容は処理に影響は与えませんので何でもよいです。

　　日付やPHPバージョンを付けるのが一般的なようです。



　　ただし修正ファイル数が多い場合は、変更が大変です。



③.htaccessを使用する



　　サーバ上のアプリ配置先ディレクトリに.htaccessを作成します。

　　内容の例は以下です。



　　<IfModule mod_expires.c>

　　ExpiresActive On

　　ExpiresDefault “access plus 1 seconds” 

　　ExpiresByType image/jpeg “access plus 3 days” 

　　ExpiresByType image/png “access plus 3 days” 

　　ExpiresByType image/gif “access plus 3 days” 

　　ExpiresByType text/css “access plus 600 seconds” 

　　ExpiresByType text/javascript “access plus 600 seconds” 

　　ExpiresByType application/x-javascript “access plus 600 seconds” 

　　ExpiresByType text/html “access plus 600 seconds” 

　　</IfModule>



　　ExpiresByTypでコンテンツタイプごとのキャッシュ有効期限を設定でき、

　　それ以外の場合はExpiresDefaultの設定に従います。



　　plusキーワードには以下の単位が指定できます。

　　　years

　　　months

　　　weeks

　　　days

　　　hours

　　　minutes

　　　seconds



　　またplusキーワードを組み合わせることも可能です。

　　　ExpiresByType image/gif “access plus 1 hours 2 minutes 3 seconds”