web-dev-qa-db-ja.com

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

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

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

htmlcachingbrowsermeta-tags
252
Adam

これが.cssおよび.jsの変更に関するものである場合、1つの方法は各リリースのファイル名に「_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.

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

303
Fermin

cache-control と expires METAタグを調べてください。

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

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

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

93
Sampson

2012年を更新

これは古い質問ですが、今ではウェブサイトのキャッシングをもっとコントロールする方法があるので、もっと最新の答えが必要だと思います。

オフラインWebアプリケーション （これは実際にはHTML5のWebサイトです） applicationCache.swapCache() を使用すると、手動でページをリロードすることなく、キャッシュされたWebサイトを更新できます。

これは、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年を更新

Web上で状況は急速に変化します。この質問は2009年に寄せられ、2012年に私は質問に記述されている問題を処理するための新しい方法についての更新を投稿しました。さらに4年が経過し、今ではすでに非推奨になっているようです。コメントで指摘してくれた cgaldiolo に感謝します。

現在、2016年7月現在、 HTML規格、7.9節、オフラインWebアプリケーション には非推奨の警告が含まれています。

この機能は、Webプラットフォームから削除中です。現時点ではオフラインのWebアプリケーション機能を使用することはお勧めできません。代わりにサービスワーカーを使用してください。

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

廃止予定
この機能はWeb標準から削除されました。いくつかのブラウザはまだそれをサポートするかもしれませんが、それは落とされる過程にあります。古いプロジェクトや新しいプロジェクトでは使用しないでください。それを使っているページやWebアプリはいつでも壊れるかもしれません。

Bug 1204581 - サービスワーカーのフェッチインターセプトが有効になっている場合はAppCacheの廃止予定の通知を追加してください も参照してください。

72
rsp

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

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

"cache header"またはここで似たようなものをSOで検索した場合は、ASP.NET固有の例が見つかります。

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

myimage.gif?random=1923849839
26
Pekka 웃

静的リソース の場合、正しいキャッシングは クエリパラメータを使用する 各デプロイメントまたはファイルバージョンの値を使用することになります。これは各展開後にキャッシュをクリアする効果があります。

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

これがASP.NET MVCの例です。

<link href="@Url.Content("~/Content/Css/Reset.css")[email protected]().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

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

14
Paulius Zaliaduonis

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

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

編集他の人が指摘したように、ファイルサイズによってこの変更を識別し、変更されたときにのみイメージを再ロードするので、以下ははるかに効率的な解決策です。

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

私はよく似た問題を抱えていて、これが私がそれを解決した方法です：

  1. index.htmlファイルにマニフェストを追加しました。

    <html manifest="cache.manifest">

  2. <head>セクションには、キャッシュを更新するスクリプトが含まれています。

    <script type="text/javascript" src="update_cache.js"></script>

  3. <body>セクションにonload関数を挿入しました。

    <body onload="checkForUpdate()">

  4. cache.manifestに、キャッシュしたいファイルをすべて入れました。私の場合（Apache）では、 "version"コメントを毎回更新するだけで動作することが重要になりました。ファイルに "？ver = 001"などの名前を付けることもできますが、 不要 です。 # version 1.01だけを変更すると、キャッシュ更新イベントが発生します。

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

    Index.htmlに1.、2.、および3. points only を含めることが重要です。さもないと

    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ページにアクセスするとキャッシュが更新されます。

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

6
Wojtek Mazurek

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

これには、入れ子になった反復的なスクリプトテスト（大規模なもの！）や破損したサードパーティソフトウェアの回避策が含まれます。ここで与えられた解決策のどれもそのような一般的なシナリオに取り組むのに十分ではありません。ほとんどのWebブラウザはあまりにも積極的なキャッシングであり、これらの問題を回避するための実用的な手段を提供していません。

4
John

URLを次のように更新しても問題ありません。

/custom.js?id=1

?id=の後に固有の番号を追加し、それを新しい変更のために増分することによって、ユーザーはキャッシュをリフレッシュするためにCTRL + F5を押す必要はありません。あるいは、?id=の後に現在の時刻またはEpochのハッシュまたは文字列バージョンを追加することもできます。

?id=1520606295のようなもの

2
nPcomp
<meta http-equiv="pragma" content="no-cache" />

https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images も参照してください。

2
S Pangborn

それが本当に役立つかどうかはわかりませんが、どのブラウザでもキャッシングが機能するはずです。ブラウザがファイルを要求するときは、「オフライン」モードがない限り、常にサーバーに要求を送信する必要があります。サーバーは、更新日や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-変更ヘッダー対有効期限ヘッダーvs対etag/

読んだ後、私は有効期限もあることを見ました。問題がある場合は、有効期限が設定されている可能性があります。言い換えれば、ブラウザがあなたのファイルをキャッシュするとき、それは有効期限があるので、その日付の前にそれを再び要求する必要はないはずです。言い換えれば、それはファイルをサーバーに要求することは決してなく、変更されていない304を受け取ることもありません。有効期限に達するかキャッシュがクリアされるまでキャッシュを使用します。

だから私の推測では、あなたにはある種の有効期限があります、そしてあなたは最後に修正されたetagかそれをすべて組み合わせたものを使いそして有効期限がないことを確認するべきです。

人々が頻繁に更新する傾向があり、ファイルがあまり変更されない場合は、大きな有効期限を設定するのが賢明です。

私の2セント！

2
Loïc Faure-Lacroix

私は私のために働くこの単純な解決策を実装しました（まだ本番環境ではありません）：

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のversion値が現在のバージョンよりも低いかどうかをチェックして、

location.reload(true);

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

（明らかに、localStorageの代わりにあなたはクッキーまたは他の永続的なクライアントストレージを使うことができます）

単一のファイル "versio.txt"をメンテナンスするだけでサイト全体が強制的にリロードされるため、私はその単純さからこのソリューションを選びました。

QueryStringメソッドは実装が難しく、キャッシュもされます（v1.1から以前のバージョンに変更した場合はキャッシュからロードされるため、キャッシュはフラッシュされず、以前のすべてのバージョンはキャッシュに保持されます）。

私は少し初心者です、そして私は私の方法が良いアプローチであることを確認するためにあなたの専門的なチェックとレビューを評価したいです。

それが役に立てば幸い。

1
Seak

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

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
Dave Swersky

ブラウザにキャッシュをクリアさせるか、正しいデータをリロードさせるか？ stackoverflowで説明されている解決策のほとんどを試してみましたが、しばらくすると、最終的にキャッシュされて以前にロードされたスクリプトまたはファイルが表示されます。キャッシュ（css、jsなど）をクリアして実際にすべてのブラウザで機能する方法はありますか？

サーバー上のファイルの日付と時刻を変更すると、特定のリソースを個別にリロードできることがわかりました。 「キャッシュをクリアする」ことは、あるべきほど簡単ではありません。ブラウザのキャッシュをクリアする代わりに、キャッシュされたサーバーファイルを「タッチする」ことで実際にサーバーにキャッシュされたソースファイルの日付と時刻が変わることがわかりました（Edge、Chrome、Firefoxでテスト済み）。サーバー上の最新の最新コピー（コード、グラフィック、マルチメディアも）。プログラムを実行する前に、サーバ上の最新のスクリプトをコピーして、 "タッチ操作をしてください" ソリューションを実行すると、問題のあるファイルすべての日付が最新の日付と時刻に変更されます。新しいコピーをブラウザにダウンロードします。

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

それで…あなたのプログラムの残りの部分….

この問題を解決するには少し時間がかかりました（多くのブラウザはコマンドごとに動作が異なりますが、ファイルの時間を確認し、ブラウザでダウンロードしたコピーと比較すると、日付と時刻が異なる場合は更新されます）。想定された正しい方向に進むことはできません、それに常に有用で優れた解決策があります。よろしくと幸せなキャンプ。ちなみにtouch（）;または代替手段は、JavaScript bash sh phpを含む多くのプログラミング言語で機能します。それらをhtmlに含めたり呼び出したりすることができます。

0
Luis H Cabrejo

Cache-control：no-cacheを設定することに加えて、毎回ローカルコピーを更新したい場合はExpiresヘッダを-1に設定する必要があります（IEのバージョンによってはこれが必要になるようです） 。

を参照してください。HTTP Cache - 常にIf-Modified-Sinceを送信し、サーバーに確認します

0
danben

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

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

たとえ "？"の後に来るものであっても、ブラウザは文字列全体をファイルパスとして解釈します。パラメータです。そのため、次回ファイルを更新するときには、Webサイトのscriptタグの番号を変更するだけで（例<script src="myfile.js?version=1.0.1"></script>）、ファイルが変更されたことが各ユーザーのブラウザに表示され、新しいコピーが取得されます。

0
Joish