技術ブログ

JavaScript デザイン

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

投稿日：2017年3月10日更新日：2020年5月10日

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。

まず通常のHTMLですが、HTMLヘッダに下記のように書けばOKなようです。

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

1

2

3

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

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

<meta http-equiv="Expires" content="0">

cssやjsファイルの後ろに下記のように何らかのクエリをつければ回避できるようです。

自分はCakePHPを使っているんでtimeをいれて下記のように解決しました。PHPであれば javascriptのファイル名?v=<?php echo time()?> などでいけると思います。

<?= $this->Html->script('report_list.js?v='.time()) ?>

1	<?= $this->Html->script('report_list.js?v='.time()) ?>

無効になっているかどうかの判定ですが、ChromeやFireFoxのデバッグ機能でHTMLのステータスコードが200になっていればOKです。キャッシュが聞いていると304がでます。

HTML ファイルがなかなか更新されない場合、キャッシュを無効にする (通所のHTML)

iwb.jp CSSやJSをキャッシュさせない方法(cssやJS)

-JavaScript, デザイン
-HTML+CSS

執筆者：matsumoto

comment コメントをキャンセル

関連記事

: ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

<div id="input_area">
 
        <form action="" name="loginForm">
       	    <input type="text" name="user_name"  size="30" maxlength="50" />
　          <input type="password" name="password"  size="12" maxlength="12"  />
            <input type="submit" class="btn btn-primary btn-large" value="ログイン" />
        </form>
</div>

1

2

3

4

5

6

7

8

<div id="input_area">

<form action="" name="loginForm">

<input type="text" name="user_name" size="30" maxlength="50" />

　 <input type="password" name="password" size="12" maxlength="12" />

<input type="submit" class="btn btn-primary btn-large" value="ログイン" />

</form>

</div>

基本的な …

: gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

: オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

: vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。既存のvueの記事 Vue.jsについて vueの環境構築今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

PREV: AngularJSでのHtmlFormオプション+Filter
NEXT: PHPのPDF出力に関するエラー

: 2024/11/26

バカほど成功するを言語化してみる

: 2024/10/05

AWS連携系のリソースについて

: 2024/10/05

S3とKMSキーについて

: 2024/09/29

AWSの監視システムについて

: 2024/09/28

ECSの構築に必要なリソースについて