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

Question

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

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

score 401 · Accepted Answer

これが変更された場合.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.

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

score 121 · Accepted Answer

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>

score 78 · Accepted Answer

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 アプリケーション機能を使用しないことを強くお勧めします。代わりに Service Worker を使用してください。

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

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

バグ1204581 - サービスワーカーのフェッチインターセプトが有効な場合、AppCache の非推奨通知を追加します。

score 27 · Accepted Answer

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

すべてのブラウザーで、Web ページがキャッシュされていないことを確認します。

"cache header"SO で何かを検索すると、ASP.NET 固有の例が見つかります。

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

myimage.gif?random=1923849839

score 14 · Accepted Answer

静的リソースの場合、適切なキャッシュは、各展開またはファイルバージョンの値でクエリパラメーターを使用することです。これにより、展開のたびにキャッシュがクリアされます。

/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" />

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

score 14 · Accepted Answer

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

ファイルにindex.htmlマニフェストを追加しました：
```
<html manifest="cache.manifest">
```
セクションには<head>、キャッシュを更新するスクリプトが含まれています。
```
<script type="text/javascript" src="update_cache.js"></script>
```
セクションでは、<body>onload 関数を挿入しました。
```
<body onload="checkForUpdate()">
```
cache.manifestキャッシュしたいすべてのファイルを入れました。「バージョン」コメントを毎回更新するだけで、私の場合（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
```
ページが既にキャッシュされているときに、すべての「子」ファイルがページをキャッシュしようとするために発生します。

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

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

score 7 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

私のために機能するこの単純なソリューションを実装しました（まだ本番環境ではありません）：

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 やその他の永続的なクライアントストレージを使用できます)

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

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

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

それが役に立てば幸い。

score 1 · Accepted Answer

これは、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

score 1 · Accepted Answer

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

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

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

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

私の2セント！

score 0 · Accepted Answer

ローカルコピーを毎回更新する場合は、Cache-control: no-cache を設定するだけでなく、Expires ヘッダーを -1 に設定する必要があります (IE の一部のバージョンではこれが必要なようです)。

HTTP キャッシュを参照してください- サーバーに確認し、常に If-Modified-Since を送信します

score 0 · Accepted Answer

webpack ユーザーの場合:-

webpack 構成にチャンクハッシュを使用して時間を追加しました。これにより、展開ごとにキャッシュを無効にするという私の問題が解決されました。また、index.html/asset.manifest が CDN またはブラウザーの両方にキャッシュされないように注意する必要があります。webpack config のチャンク名の設定は次のようになります:-

ファイル名: [chunkhash]-${Date.now()}.js

またはコンテンツハッシュを使用している場合

ファイル名: [コンテンツハッシュ]-${Date.now()}.js

score -1 · Accepted Answer

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

後者の場合、次のように単純にする必要があります

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

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

20 に答える 20

2012年更新

2016年更新

Related

Reference