2016年1月11日月曜日

HTML キャッシュ対策

HTMLを記述していると、正しく記述したのに、期待通りに動かないことがあります。
このような場合の原因のひとつは、キャッシュ機能です。
サーバーにある最新のファイルを取りに行かず、ローカルに保存した古いファイルを参照するため、HTMLの修正がブラウザに反映されません。

HTMLファイルの対策としては、
HTMLに、下記のような記述を追加すれば、常に最新のファイルが読み込まれます。

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

しかし、HTMLファイルは、キャッシュされる方が利点があるため、あまり、使いません。PHPでの出力では、キャッシュされると困る場合が多いため、キャッシュを無効にしますが、HTMLに記述するより、ヘッダーを使っています。

header('Cache-Control: no-cache');
header('Pragma: no-cache');


これで、万全かと言えばそうではなく、cssやjavascript、画像ファイルなどは、キャッシュされます。
これらのファイルのキャッシュ制御をPHPで無効にできるか調べてみましたが、できないようです。

対策として、URLに、?v=[日付]を付加する方法があります。
ファイルの作成日を使うと確実ですが、ファイルの修正後、バージョン番号(?v=[バージョン番号])を修正しても良いと思います。

<link rel='stylesheet' href='default.css?ver=1' />

他の方法としては、javascriptを使った方法もあります。
javascriptで読み込み、適当な場所に挿入します。

var req = new XMLHttpRequest();
req.open ('GET', 'test.png', true);
req.setRequestHeader('Pragma', 'no-cache');
req.setRequestHeader('Cache-Control', 'no-cache');
[挿入プログラム]

上記の方が正統だと思いますが、下記でも良いと思います。
var req = new XMLHttpRequest();
req.open ('GET', 'test.png?v=1', true);
[挿入プログラム]

0 件のコメント:

コメントを投稿