ブラウザに強制的にキャッシュをクリアさせる


283

ページにコードを配置して、誰かがサイトにアクセスしたときにブラウザーのキャッシュをクリアして、変更を表示できるようにする方法はありますか?

使用言語:ASP.NET、VB.NET、そしてもちろんHTML、CSS、jQuery。


「キャッシュをクリアする」ための素晴らしい解決策または回避策は、こちらにあります:stackoverflow.com/a/43676353/2008111
caramba

回答:


350

これがそうな場合.css.js変更、一つの方法は「のようなものを追加することである「キャッシュが破裂」することです_versionNo各リリースのファイル名に」。例えば:

script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.

または、ファイル名の後に実行します。

script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.

このリンクをチェックして、それがどのように機能するかを確認できます。


10
これはかなり優れたソリューションであり、ビルドシステムによって自動化することもできます(そうする必要があります)。たとえば、Stackoverflowはこのアプローチを使用します。
derobert、2009

7
SOは現在GET引数を使用しています。
Saeb Amini、

60
ファイル名をそのままにしておくことをお勧めしますが、バージョン番号をクエリ文字列パラメータとして追加しますscript.js?v=1.2。(または、バージョンを追跡しない場合は、ファイルの最終変更時刻を使用するだけで、さらに簡単になります)。それが前のコメンターが意味したものであるかどうかわかりません!
Doin

5
誰もがバージョン管理でこれをどのように行いますか?本当の痛みのようです。
Shawn

1
@Shawnバージョン管理では、<link />タグを動的にレンダリングして、アプリケーションのバージョンをクエリ文字列パラメーターとして挿入できます。または、一部のCMSには、CMS全体の設定として「クライアントリソースバージョン」が追加されます。サイトの管理者は手動でバージョンのnrを上げることができ、CMSの更新によって自動的に更新されることもあります。結論:ファイルのURLを動的にレンダリングする必要があります。
Jeroen 2014年

103

キャッシュ制御有効期限が切れる METAタグを。

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

別の一般的な方法は、絶えず変化する文字列を要求されたファイルの最後に追加することです。例えば:

<script type="text/javascript" src="main.js?v=12392823"></script>


44
これはすでにキャッシュされている場合にはあまり役に立ちません。キャッシュされているため、サーバーはクエリされず、キャッシュなしで応答できません。また、メモが言うように、そのメタタグは実際には使用すべきではありません。Webキャッシュで壊れます。
derobert 2009

1
+1デロベルトが言ったこと。常にHTTPヘッダーを使用してクライアントとWebキャッシュにキャッシュポリシーを提案することをお勧めしますが、それでもキャッシュの再読み込みを強制することはできません。

4
2番目のソリューションの+1。一部の管理者が更新を行った後初めてキャッシュをクリアする必要があるというこの問題があります。このアプローチはそれを解決するはずです
Jules Colle

キャッシュを完全に無効にすることは、通常、非常に悪い考えです。
ジョーダン

73

2012年の更新

これは古い質問ですが、ウェブサイトのキャッシュをより詳細に制御する方法があるので、もっと最新の答えが必要だと思います。

ではオフラインのWebアプリケーション(実際には任意のHTML5のウェブサイトです)applicationCache.swapCache()手動でページをリロードする必要なしに、あなたのウェブサイトのキャッシュされたバージョンを更新するために使用することができます。

これは、HTML5 Rocksでのアプリケーションキャッシュの使用に関する初心者向けガイドのコード例であり、ユーザーをサイトの最新バージョンに更新する方法を説明しています。

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

詳細については、Mozilla Developer Networkでのアプリケーションキャッシュの使用も参照してください。

2016年の更新

物事はウェブ上で急速に変化します。この質問は2009年に尋ねられ、2012年に、質問で説明されている問題を処理するための新しい方法に関する更新を投稿しました。さらに4年が経過しましたが、すでに廃止されているようです。コメントで指摘してくれたcgaldioloに感謝します。

現在、2016年7月の時点で、HTML標準、セクション7.9、オフラインWebアプリケーションには非推奨の警告が含まれています。

この機能は、Webプラットフォームから削除中です。(これは何年もかかる長いプロセスです。)現時点では、オフラインのWebアプリケーション機能のいずれかを使用しないでください。代わりにService Workerを使用してください。

2012年に参照したMozilla Developer Networkのアプリケーションキャッシュの使用も同様です

非推奨
この機能はWeb標準から削除されました。一部のブラウザではまだサポートされている可能性がありますが、削除される予定です。古いプロジェクトや新しいプロジェクトでは使用しないでください。それを使用するページまたはWebアプリはいつでも壊れる可能性があります。

バグ1204581-Service Workerフェッチインターセプトが有効になっている場合、AppCacheの非推奨通知追加してください


1
これは、キャッシュマニフェストファイルを使用および維持する必要があることを意味しますか?
サム

警告:アプリケーションキャッシュ(AppCache)インターフェイスは非推奨になりました
cgaldiolo

59
では、2017年の現在の推奨事項は何ですか?
Garrett

このトピックで見られる主な問題は、ユーザーのデバイスの内部メモリがいっぱいになったために、ビューアが使用しているデバイスがキャッシュバージョンを使い続ける場合です。キャッシュされたバージョンのページに行き詰まり、ドキュメントの要素が更新されないようです。これはクロムでのみ発生しますか?それは私がそれを経験した唯一のブラウザです。
user2585548 2017

4
2017:サービスワーカーを使用します。
ディジタイ2017

27

そうではありません。1つの方法は、コンテンツを配信するときに適切なヘッダーを送信して、ブラウザーに強制的にリロードさせることです。

すべてのブラウザーでWebページがキャッシュされないようにする。

"cache header"ここでSOを検索したり、類似のものを検索したりすると、ASP.NET固有の例が見つかります。

別の、あまりクリーンではないが、サーバー側でヘッダーを制御できない場合の唯一の方法は、呼び出されるリソースにランダムなGETパラメーターを追加することです。

myimage.gif?random=1923849839

2
ファイルを適切にバージョン管理することは本当に良いことです。これはかなり大きな帯域幅の浪費であり、おそらくもっと重要なこととして、サイトの速度が大幅に低下します。
derobert、2009

8
それは本当に状況次第ですね。CMSをプログラミングしていて、変更されたすべてのリソースが適切に更新されていることを確認する必要がある場合、これら2つのオプションのいずれかを回避する方法がない場合があります。
Pekka、

このような解決策は否定に投票する必要があります。インターネットのCO2フットプリントを可能な限り低く保つのは私たち次第です。
タイミング

14

以下のために静的リソース右キャッシングがするだろうクエリパラメータを使用する各デプロイメントまたはファイルバージョンの値を持ちます。これにより、展開ごとにキャッシュがクリアされます。

/Content/css/Site.css?version={FileVersionNumber}

以下はASP.NET MVCの例です。

<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

アセンブリのバージョンを更新することを忘れないでください。


この回答に感謝しますが、BundleTableにリソースを追加するときにそれを行う方法を教えてください。
トレグア2013

私の場合、これはバージョンとして「0.0.0.0」を返していました。あなたのMVCアプリのDLLのバージョンを取得するには、代わりにこれを使用する:?version=@ViewContext.Controller.GetType().Assembly.GetName().Version
CGodo

1
これにより、FirefoxとChromeがコンテンツを完全にキャッシュできないことがわかりました。
サム

10

私は同様の問題を抱えていましたが、これが私がそれを解決した方法です:

  1. ではindex.html、ファイルIは、マニフェストを追加しました:

    <html manifest="cache.manifest">
  2. <head>セクションキャッシュを更新するスクリプトが含まれていました。

    <script type="text/javascript" src="update_cache.js"></script>
  3. <body>セクションIは、機能をオンロード挿入しました:

    <body onload="checkForUpdate()">
  4. cache.manifestIキャッシュに私がしたいすべてのファイルを入れています。私のケース(Apache)では、「バージョン」コメントを更新するたびに機能することが重要です。また、名前の末尾に「?ver = 001」などを付けてファイルに名前を付けることもできますが、必須ではありません。変更# version 1.01すると、キャッシュ更新イベントがトリガーされます。

    CACHE MANIFEST
    # version 1.01
    style.css
    imgs/logo.png
    #all other files

    1.、2、3。のポイント、index.htmlにのみ含めることが重要です。さもないと

    GET http://foo.bar/resource.ext net::ERR_FAILED

    ページが既にキャッシュされているときに、すべての「子」ファイルがページをキャッシュしようとするために発生します。

  5. update_cache.jsファイル私はこのコードを入れています:

    function checkForUpdate()
    {
        if (window.applicationCache != undefined && window.applicationCache != null)
        {
            window.applicationCache.addEventListener('updateready', updateApplication);
        }
    }
    function updateApplication(event)
    {
        if (window.applicationCache.status != 4) return;
        window.applicationCache.removeEventListener('updateready', updateApplication);
        window.applicationCache.swapCache();
        window.location.reload();
    }

これでファイルを変更するだけで、マニフェストでバージョンコメントを更新する必要があります。index.htmlページにアクセスすると、キャッシュが更新されます。

ソリューションの一部は私のものではありませんが、インターネットを介してそれらを見つけ、機能するようにまとめました。


CACHE.MANIFESTがどこに書かれているか知ることができますか?
Shweta Gulati 2016

1
Shweta Gulatiマニフェストファイルは、「インデックス」ファイルと同じフォルダーにある必要があります。それがうまくいかない時は何ですか?
Wojtek Mazurek 2016年

1
@ShwetaGulatiはい、キャッシュはhtmlファイルの変更を検出しません-変更がチェックされているので、マニフェストファイルのバージョン番号を更新する必要があります。詳細がわからないので、あなたを助けるのは本当に難しいです。キャッシュしたいファイルをすべてマニフェストに入れたかどうか教えてください。パスはマニフェストファイルからの相対パスである必要があります。あなたは私にあなたのウェブサイトのアドレスを与えることができます、そして私は問題が何であるかを言うことができます:)
Wojtek Mazurek

1
@ShwetaGulatiこれは、ブラウザが一部のファイルを自動的にキャッシュして、ページの読み込みを高速化するためです。これはデフォルトの動作であり、ブラウザのみに依存しているため、決して設定することはできません。特にjsファイルは、通常はWebサイトのすべてのページで使用されるため、ブラウザーのスコープ上にあるため、キャッシュするのが賢明です。すべてのファイルをキャッシュするには、マニフェストファイルにすべてのファイルの名前を書き込む以外に方法はありません。あなたが何かを見つけた場合は、私も教えてください。私も必要だからです。)
Wojtek Mazurek

1
ファイルへの絶対パスは重要ではありません。ブラウザがファイルのリクエストを送信するため、アドレスからの相対パスが重要です。F.ex:example.comというドメインがあり、servers names.comにあります。私のスペースはexample.names.comです。それで、example.comドメインをリダイレクトとしてサーバースペースexample.names.comに参加させます。そのためには、このリダイレクトの目標としてフォルダーを設定する必要があります。したがって、example.names.comに複数のサイトを作成する場合は、「name1」というフォルダを作成し、そこにリダイレクトを設定して、すべてのファイルを中に置きます。パスはここからカウントされます。マニフェストファイルにname1 \ scripts \ test.jsがある場合、scripts \ test.jsと記述します。
Wojtek Mazurek 2016年

7

クライアントの写真をオンラインで撮る場合があり、写真が変更された場合はdivを更新する必要があります。ブラウザはまだ古い写真を表示していました。そこで、ランダムなGET変数を呼び出すハックを使用しました。これは毎回一意になります。ここでそれは誰かを助けることができるかどうかです

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

編集他の人が指摘したように、ファイルサイズによってこの変更を識別し、変更された場合にのみ画像を再読み込みするため、以下ははるかに効率的なソリューションです。

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

29
これはまったくエレガントではありません。リソースをダウンロードするのに多くの時間を浪費するたびにサイトが画像をリロードします。より良い解決策は、乱数の代わりにファイルサイズを使用することです。これにより、ファイルが実際にあるときにのみキャッシュが再検証されます変更
Roberto Arosemena 2015年

8
または画像バイトのハッシュ
テイラーエドミストン

1
それはすべてユーザーの要件に依存します。写真の数が多い場合、シナリオは数枚の写真とは異なります。ファイルサイズを確認すると帯域幅が節約されますが、追加の処理が追加され、ページの読み込みが遅くなる可能性があります。写真が頻繁に変更され、ユーザーが最新の写真を入手することが重要なビジネス上の決定であった私の場合、これは完璧なソリューションでした。
ジーシャン

構成で静的な値にすることもできますが、これは決して理想的な方法ではありません。
シーア

3
<img src = "/ photos / userid_73.jpg?modified = <?= filemtime(" / photos / userid_73.jpg ")?>"のほうがはるかに便利です。
Fusca Software

4

多くの答えは要点を欠いています-ほとんどの開発者はキャッシュをオフにすることが非効率的であることをよく知っています。ただし、効率が重要ではなく、デフォルトのキャッシュ動作が大幅に壊れている多くの一般的な状況があります。

これらには、ネストされた反復スクリプトテスト(大きなもの!)と壊れたサードパーティソフトウェアの回避策が含まれます。ここで示すソリューションは、このような一般的なシナリオに対処するのに十分ではありません。ほとんどのWebブラウザーは非常に積極的なキャッシングであり、これらの問題を回避する賢明な手段を提供していません。



2

URLを次のように更新すると、うまくいきます。

/custom.js?id=1

?id=新しい変更の後に一意の番号を追加して増分することにより、ユーザーはを押しCTRL + F5てキャッシュを更新する必要がありません。または、現在の時刻またはエポックのハッシュまたは文字列バージョンを後に追加できます。?id=

何かのようなもの ?id=1520606295


1

ここで MDSNページには、ASP.NETでのキャッシュの設定です。

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True

If Response.Cache.VaryByParams("Category") Then
   '...
End If

1

それが本当に役立つかどうかはわかりませんが、それがどのブラウザでもキャッシュが機能する方法です。ブラウザーがファイルを要求するとき、「オフライン」モードでない限り、常にサーバーに要求を送信する必要があります。サーバーは、変更日やetagsなどのいくつかのパラメーターを読み取ります。

サーバーはNOT MODIFIEDに対して304エラー応答を返し、ブラウザはそのキャッシュを使用する必要があります。etagがサーバー側で検証されない場合、または変更日が現在の変更日を下回っている場合、サーバーは新しい変更日またはetagsまたはその両方を含む新しいコンテンツを返す必要があります。

ブラウザーに送信されたキャッシュデータがない場合、動作は不確定であると思います。ブラウザーは、キャッシュ方法を知らないファイルをキャッシュする場合としない場合があります。応答でキャッシュパラメータを設定すると、ファイルが正しくキャッシュされ、サーバーは304エラーまたは新しいコンテンツを返すことを選択できます。

これは、それを行う方法です。URLでランダムなパラメーターまたはバージョン番号を使用することは、何よりもハックに似ています。

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs- expire-header-vs-etag /

読んだ後、有効期限もあることがわかりました。問題がある場合は、有効期限が設定されている可能性があります。つまり、ブラウザがファイルをキャッシュする場合、ファイルには有効期限があるため、その日付より前に再度リクエストする必要はありません。つまり、サーバーにファイルを要求することはなく、変更されていない304を受信することもありません。有効期限に達するか、キャッシュがクリアされるまで、キャッシュを使用します。

ですから、私の推測ですが、有効期限があり、最後に変更されたetagsまたはそれをすべて組み合わせて使用​​し、有効期限がないことを確認する必要があります。

ユーザーが頻繁に更新する傾向があり、ファイルがあまり変更されない場合は、大きな有効期限を設定することをお勧めします。

私の2セント!


1

私は(本番環境ではまだ機能していない)機能するこの簡単なソリューションを実装しました。

function verificarNovaVersio() {
    var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
    $.ajax({
        url: "./versio.txt"
        , dataType: 'text'
        , cache: false
        , contentType: false
        , processData: false
        , type: 'post'
     }).done(function(sVersioFitxer) {
        console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
        if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
            localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
            location.reload(true);
        }
    });
}

私はhtmlがある場所に小さなファイルがあります:

「versio.txt」:

v00.5.0014

この関数はすべてのページで呼び出されるため、ロード時にlocalStorageのバージョン値が現在のバージョンよりも低いかどうかを確認し、

location.reload(true);

...キャッシュからではなく、サーバーから強制的にリロードします。

(明らかに、localStorageの代わりにCookieまたはその他の永続的なクライアントストレージを使用できます)

単一のファイル "versio.txt"を保持するだけでサイト全体が強制的にリロードされるため、このソリューションを単純化するために選択しました。

queryStringメソッドは実装が困難であり、またキャッシュされます(v1.1から以前のバージョンに変更すると、キャッシュからロードされます。つまり、キャッシュはフラッシュされず、以前のすべてのバージョンがキャッシュに保持されます)。

私は少し初心者ですが、私の方法が優れたアプローチであることを確認するために、専門家によるチェックとレビューに感謝します。

それが役に立てば幸い。



0

使用できるトリックが1つあります。トリックは、スクリプトタグのファイル名にパラメーター/文字列を追加し、ファイルの変更時に変更することです。

<script src="myfile.js?version=1.0.0"></script>

ブラウザは、「?」の後に何があっても、文字列全体をファイルパスとして解釈します。パラメータです。つまり、次にファイルを更新するときに、Webサイトのスクリプトタグの番号を変更するだけで(例<script src="myfile.js?version=1.0.1"></script>)、各ユーザーのブラウザでファイルが変更されたことがわかり、新しいコピーが取得されます。


0

ブラウザにキャッシュをクリアするか、正しいデータを再読み込みさせますか?私はstackoverflowで説明されているソリューションのほとんどを試してみましたが、しばらくすると、最終的にキャッシュされ、以前に読み込まれたスクリプトまたはファイルが表示されます。キャッシュ(css、jsなど)をクリアして実際にすべてのブラウザーで機能する別の方法はありますか?

これまでのところ、サーバー上のファイルの日付と時刻を変更すると、特定のリソースを個別に再読み込みできることがわかりました。「キャッシュのクリア」は、本来あるべきほど簡単ではありません。ブラウザーのキャッシュをクリアする代わりに、キャッシュされたサーバーファイルに「触れる」と、サーバーにキャッシュされたソースファイルの日付と時刻が実際に変更され(Edge、Chrome、Firefoxでテスト済み)、ほとんどのブラウザーが自動的に最もダウンロードします。サーバー上の最新の最新コピー(コード、グラフィックス、マルチメディアも)。プログラムを実行する前に、最新のスクリプトをサーバーにコピーし、問題を解決するソリューションを実行することをお勧めします。これにより、問題のあるすべてのファイルの日付が最新の日時に変更され、新しいコピーがダウンロードされます。ブラウザに:

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

次に...プログラムの残りの部分...

この問題を解決するのに少し時間がかかりました(多くのブラウザーはコマンドによって動作が異なりますが、ファイルの時間をチェックし、ブラウザーでダウンロードしたコピーと比較します(日付と時刻が異なる場合は、更新が行われます)。想定された正しい方法を実行することはできません。それには、別の使用可能なより良い解決策が常にあります。よろしくと幸せなキャンプ。ちなみにtouch(); または代替手段は、javascript bash sh phpを含む多くのプログラミング言語で機能し、それらをhtmlに含めたり、htmlに呼び出したりできます。


1
ファイルが変更された場合、タイムスタンプはいずれにせよすでに変更されているため、ファイルを再度強制するメリットはありません。
Fusca Software

touchコマンドはファイルをまったく変更しません。日付と時刻の属性を変更し、ブラウザをだます新しいバージョンに変換して、新しいコピーとしてダウンロードします。
Luis H Cabrejo 2018年

-1

キャッシュをクリアしますか、それとも現在の(変更された)ページがキャッシュされていないことを確認しますか?

後者の場合、それは次のように単純でなければなりません

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

私は最近、Chromeの投稿でこのアプローチについて読みましたが、Firefox 3.6では、少数のライブサーバー、localhost、およびWindowsファイル共有でのみ一貫した結果が見つかりました。
ダンジャ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.