web-dev-qa-db-ja.com

サイトのコンテンツがAngularJS Webサイトで変更されたときにindex.htmlをキャッシュしないようにするにはどうすればよいですか?

通常、.jsおよび.cssファイルの場合、ビルド中にxx.js?v=123などのバージョンを追加し、Webサイトの展開後に、jsとCSSの新しいバージョンを取得できます。しかし、Webサイトの展開時にindex.htmlファイルをアップグレードする方法について話している場所は見当たりません。そして、IEでHTMLコンテンツは変更されているはずですが、それでも古いHTMLコンテンツが使用されていることがわかります。

私がGoogleから見つけた1つの解決策は

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

しかし、これが最善の解決策であるかどうかはわかりませんか?

17
Rongyan Xia

はい、それは正しい方法です。 Cache-Controlヘッダーを設定して、ブラウザがそのリクエストのコンテンツをキャッシュする必要がないことを知らせる必要があります。

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

PragmaCache-Controlは同じものですが、HTTP仕様が異なります。ここの答えを参照してください: PragmaとCache-controlヘッダーの違い?

関連する回答のいずれかを参照してください: yeoman index.htmlキャッシュをバーストする方法

32

コメントで述べたように、実際に見たいサーバー構成ですが、セットアップについては言及していません。 IISを使用して.NETバックエンドでAngularJSサイトを実行します。

私たちはサイトを定期的に更新しており、過去にJSとCSSリソースのキャッシュに問題がありましたが、次の設定で解決しました。

ビルド

Gulpを使用してAngularJSアプリケーションを構築し、その一環として、頻繁に変更されるメインアプリケーションのCSSおよびJavascriptファイルのクエリ文字列にバージョン番号を追加します。例えば:

<link href="css/default.min.css?v=2" rel="stylesheet" />

サーバー構成

ルートweb.configで、cache-controlPragmaおよびExpiresリクエストヘッダーとmax -0への年齢。

<location path="index.html">
<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
  </staticContent>
    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>  
</system.webServer>
</location>

参照:

6
Michael

プリロードが有効になっていない特定のサイトの詳細設定からIISを指定できます。ただし、サイトのパフォーマンスは低下します。特定のWebサイトのアプリケーションプールにパイプラインモードがオンおよび.NETが統合されていることも確認してくださいCLRバージョン。

0

コンテンツ値を0に設定すると、ブラウザは常にWebサーバーからページをロードします。

<meta http-equiv="expires" content="0">
0
Nikhil Mahirrao