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







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”








コメント

タイトルとURLをコピーしました