2

10月 12

 

ブラウザ上でcssやjavascriptのキャッシュを使わせない方法

cssやjavascriptのファイルを変更したけど、ブラウザ上でキャッシュが残っていて
反映してくれない。仕方なくF5を押す。

と言う事で内にタグを使ってキャッシュを抑制している人も多いかも知れません。
具体的には↓の様に。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

でもこの方法だけだと、上手くキャッシュが破棄されない事も多々ありまして、
普段自分が使っているブラウザ「Firefox」でも、この方法ではキャッシュ残っちゃいます。
おそらく、HTTPの仕様に則ったものではないんでしょうね。

と言う事で、この問題をどのように回避するかと言うと、こうします。

//javascript
<script type="text/javascript" src="./javascript/menuCode.js?ver=20120829"></script>
//css
<link rel=stylesheet type="text/css" href="./style.css?ver=20120829"/>

一見普通のjavascriptの呼び出し文ですが、最後に?ver=20120829と追加しています。
この”?”マーク以降の部分はクエリー文と呼ばれるものなんですが、この値を変更する事によって、
ブラウザは現在キャッシュしているjavascriptファイル、もしくはcssファイルとは別物だと認識してくれるようです。

これはHTTPの仕様にも記述してあるようです。

オリジンサーバがそれらのレスポンスのキャッシングを明示的に禁止していない場合に、あらゆるリソースへ GET や HEAD メソッドを適用する事によってそれらのレスポンスがキャッシュから取り出されたならば、誤った動作を導くような副作用を抱えるべきではない。それらは副作用を抱えるかもしれないが、キャッシュはそのキャッシング決定においてそのような副作用を考慮必要は無い。キャッシュは常にキャッシングにおいてオリジンサーバの明示的な制限を観察する事が期待される。
この規則の一つの例外について記す。アプリケーションの中には伝統的に重要な副作用を抱えた操作を実行するためにクエリ URL (それらは rel_path 部分に “?” を含んでいる) を伴う GET や HEAD を使用しているものがあるので、キャッシュはサーバが明示的有効期限を与えていなければそのようなURI へのレスポンスを新鮮であるように扱ってはならない。これは、そのような URI に対する HTTP/1.0 サーバからのレスポンスはキャッシュから取り出されるべきではない という事を特に意味している。関連する情報については section 9.1.1 参照。
引用元:http://www.koikikukan.com/archives/2011/08/29-015555.php

今回は?ver=xxxという形式にしてみましたが、実際、これはなんでもいいです。
ただし、クエリー文は?x=yという基本形式を持っていますので、この形式に則っていれば問題ないと思います。




6 Comments

  1. 匿名 より:

    言葉の問題ですが、正確には、後半に書かれている「クエリー文を付加する方法」は、「キャッシュさせない」というより「キャッシュを使わせない」と言ったほうが良いですよね。

    IE9で確認したところ、付加したクエリー文が前回と異なると、実態は前回と同じファイルでも[1][2][3]…と番号を付加して)毎回キャッシュファイルを作ってました。
    クエリー文付なら動的ページだと判断する、のならキャッシュを作ってくれなくてもいいのに...(IE以外は確認していません)。

    1. 920 lvo より:

      匿名さま
      確かに、「キャッシュを使わせない」が正しいですね。
      できるだけ正確であることは重要だと思います。
      よって記事タイトルを変更させていただきました。
      ありがとうございます!

  2. mats-m より:

    誤字を発見したので報告です。
    * var → ver
    * 最期 → 最後

    1. 920 920 より:

      ありがとうございます。verをvarと書き間違えていたとは!

コメントを残す

Pingbacks & Trackbacks

  1. キャッシュが直りました。javascript/cssの関連で。 | 躁鬱病で統合失調症(統合失調感情障害)でモーツァルト好きなおっさんのブログ - Pingback on 2013/07/23
  2. 外部jsのキャッシュを使わせないようにする | cly7796.net - Pingback on 2015/06/06