バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


ブラウザーのキャッシュ無効化

カテゴリー:技術的なところ
Webサイトの更新作業で、更新ファイルをアップロード後によくクライアントから「更新されてませんよ!」「中身が前のままです・・」と言われること、コレ本当に多いんです。Internet Explorer(以下IE)6、7が主流だった頃からちょいちょい言われることはありましたが、大抵、「画面上部ツールバーの【表示】をクリックして【最新の情報に更新】をクリックしてみてください!」とか「F5キーを押してみてください!」で大丈夫やったのが、IE8あたりが普及し始めた頃から頻繁にいろんなクライアントの担当者様から言われるようになったんです。

どうもブラウザー(特にIE)のキャッシュ機能が強力に働いて、同じ名前のファイル(特に画像やPDFです)とかやと更新ファイルをサーバーにアップロードした後にリロードしても画面表示が変わらへん!という、更新作業をする者にしてみれば何とも理不尽な現象が起こってたようでした。

参考:キャッシュファイルとは by IT用語辞典バイナリ

参考:キャッシュファイルとは by e-Words

↑まぁ、元々キャッシュはキャッシュで便利な機能には違いないんですが・・・更新確認には、とてーも邪魔です。

↓そこで、いろいろやりました。
<meta>
タグで制御してみようと試みるも上手くいかんのですなーこれが。

参考:ページをキャッシュさせない by TAG index

参考:【眼から鱗】ブラウザのキャッシュはHTMLで制御できた

他にも似たような記事で皆様いろいろと紹介していただいておりますです。.htaccess や PHP/HTTPヘッダ で制御するとか・・・

参考:ブラウザのキャッシュを制御する by 技林

いかーし!ですな、クライアントが利用するサーバーによっては .htaccess すら使えないサーバーもあるんですよ!当然、Perl、PHPなんてCGI自体設置できないサーバーも、あ・り・ま・す・ろ〜!!

で結局HTML側でブラウザーを制御するには、効かない<meta>タグよりも、JavascriptとURLのクエリー変数で対応(パラメーターが異なれば、その都度サーバーからダウンロード)するという、今のところ最も確実で現実的な方法に到達するということになります。

参照:ブラウザのキャッシュ機能を、制作者側で制御する、手っ取り早く確実な、たったひとつの方法 by Kimihiko Tech

参照:強引にキャッシュを無効にして画像ファイルを差し替える by flat memo

参照:CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか by 小粋空間

で、自分なりには上記の Kimihiko Tech さんの紹介記事と似てるんですが、Javascriptで年月日+ミリ秒を取得して、URLのクエリーパラメーターもJavascriptでブラウザーへ出力させる方法を取るようにしました。
today = new Date();
year = today.getFullYear(); //西暦を取得
yyyy = year;
month = today.getMonth(); //月(-1)を取得
mm = month + 1; //現在の月に修正
dd = today.getDate(); //日にちを取得
tt = today.getTime(); //1970/1/1午前0時からの現在までのミリ秒を取得
if ( mm < 9 ){ mm = "0" + mm;} //月が1桁の場合は2桁表示に修正

で、HTMLの中身→更新ファイルの記述部分を次のような感じで記述しといて、と。
<script type="text/javascript">document.write('<a href="./pdf/update.pdf' + '?' + yyyy + mm + dd + tt + '" target="_blank">');</script>

ここまで用意しておいたHTMLファイルを、更新ファイル(上の例の場合は『update.pdf』)と一緒にサーバーへアップロード(上書き)してから、クライアントに連絡。タイミング次第でHTMLファイル(ページ)自体をキャッシュ表示する可能性もあるので、一応ブラウザーのリロードまたはF5キー押下をお願いする、てな具合です。
0
     | 技術的なところ | | | pookmark

    スポンサーサイト

    カテゴリー:-
    0
       | - | | | pookmark
      コメント欄
      コメントする


      ※メールアドレスは公開されません

      ※Name:欄に入力したお名前にリンクが設定されます




      この記事のトラックバックURL
      http://stressful.jugem.jp/trackback/32
      トラックバック

      Button of Go to Home

      Button of Back to Top