回答:
これがそうな場合.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.
このリンクをチェックして、それがどのように機能するかを確認できます。
script.js?v=1.2
。(または、バージョンを追跡しない場合は、ファイルの最終変更時刻を使用するだけで、さらに簡単になります)。それが前のコメンターが意味したものであるかどうかわかりません!
<link />
タグを動的にレンダリングして、アプリケーションのバージョンをクエリ文字列パラメーターとして挿入できます。または、一部のCMSには、CMS全体の設定として「クライアントリソースバージョン」が追加されます。サイトの管理者は手動でバージョンのnrを上げることができ、CMSの更新によって自動的に更新されることもあります。結論:ファイルのURLを動的にレンダリングする必要があります。
<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>
これは古い質問ですが、ウェブサイトのキャッシュをより詳細に制御する方法があるので、もっと最新の答えが必要だと思います。
ではオフラインの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でのアプリケーションキャッシュの使用も参照してください。
物事はウェブ上で急速に変化します。この質問は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つの方法は、コンテンツを配信するときに適切なヘッダーを送信して、ブラウザーに強制的にリロードさせることです。
すべてのブラウザーでWebページがキャッシュされないようにする。
"cache header"
ここでSOを検索したり、類似のものを検索したりすると、ASP.NET固有の例が見つかります。
別の、あまりクリーンではないが、サーバー側でヘッダーを制御できない場合の唯一の方法は、呼び出されるリソースにランダムなGETパラメーターを追加することです。
myimage.gif?random=1923849839
以下のために静的リソース右キャッシングがするだろうクエリパラメータを使用する各デプロイメントまたはファイルバージョンの値を持ちます。これにより、展開ごとにキャッシュがクリアされます。
/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" />
アセンブリのバージョンを更新することを忘れないでください。
?version=@ViewContext.Controller.GetType().Assembly.GetName().Version
私は同様の問題を抱えていましたが、これが私がそれを解決した方法です:
ではindex.html
、ファイルIは、マニフェストを追加しました:
<html manifest="cache.manifest">
で<head>
セクションキャッシュを更新するスクリプトが含まれていました。
<script type="text/javascript" src="update_cache.js"></script>
で<body>
セクションIは、機能をオンロード挿入しました:
<body onload="checkForUpdate()">
でcache.manifest
Iキャッシュに私がしたいすべてのファイルを入れています。私のケース(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ページにアクセスすると、キャッシュが更新されます。
ソリューションの一部は私のものではありませんが、インターネットを介してそれらを見つけ、機能するようにまとめました。
クライアントの写真をオンラインで撮る場合があり、写真が変更された場合はdivを更新する必要があります。ブラウザはまだ古い写真を表示していました。そこで、ランダムなGET変数を呼び出すハックを使用しました。これは毎回一意になります。ここでそれは誰かを助けることができるかどうかです
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...
編集他の人が指摘したように、ファイルサイズによってこの変更を識別し、変更された場合にのみ画像を再読み込みするため、以下ははるかに効率的なソリューションです。
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"
<meta http-equiv="pragma" content="no-cache" />
/programming/126772/how-to-force-a-web-browser-not-to-cache-imagesも参照してください
ここで 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
それが本当に役立つかどうかはわかりませんが、それがどのブラウザでもキャッシュが機能する方法です。ブラウザーがファイルを要求するとき、「オフライン」モードでない限り、常にサーバーに要求を送信する必要があります。サーバーは、変更日や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セント!
私は(本番環境ではまだ機能していない)機能するこの簡単なソリューションを実装しました。
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から以前のバージョンに変更すると、キャッシュからロードされます。つまり、キャッシュはフラッシュされず、以前のすべてのバージョンがキャッシュに保持されます)。
私は少し初心者ですが、私の方法が優れたアプローチであることを確認するために、専門家によるチェックとレビューに感謝します。
それが役に立てば幸い。
Cache-control:no-cacheの設定に加えて、ローカルコピーを毎回更新する場合は、Expiresヘッダーを-1に設定する必要があります(IEの一部のバージョンではこれが必要なようです)。
使用できるトリックが1つあります。トリックは、スクリプトタグのファイル名にパラメーター/文字列を追加し、ファイルの変更時に変更することです。
<script src="myfile.js?version=1.0.0"></script>
ブラウザは、「?」の後に何があっても、文字列全体をファイルパスとして解釈します。パラメータです。つまり、次にファイルを更新するときに、Webサイトのスクリプトタグの番号を変更するだけで(例<script src="myfile.js?version=1.0.1"></script>
)、各ユーザーのブラウザでファイルが変更されたことがわかり、新しいコピーが取得されます。
ブラウザにキャッシュをクリアするか、正しいデータを再読み込みさせますか?私はstackoverflowで説明されているソリューションのほとんどを試してみましたが、しばらくすると、最終的にキャッシュされ、以前に読み込まれたスクリプトまたはファイルが表示されます。キャッシュ(css、jsなど)をクリアして実際にすべてのブラウザーで機能する別の方法はありますか?
これまでのところ、サーバー上のファイルの日付と時刻を変更すると、特定のリソースを個別に再読み込みできることがわかりました。「キャッシュのクリア」は、本来あるべきほど簡単ではありません。ブラウザーのキャッシュをクリアする代わりに、キャッシュされたサーバーファイルに「触れる」と、サーバーにキャッシュされたソースファイルの日付と時刻が実際に変更され(Edge、Chrome、Firefoxでテスト済み)、ほとんどのブラウザーが自動的に最もダウンロードします。サーバー上の最新の最新コピー(コード、グラフィックス、マルチメディアも)。プログラムを実行する前に、最新のスクリプトをサーバーにコピーし、「問題を解決する」ソリューションを実行することをお勧めします。これにより、問題のあるすべてのファイルの日付が最新の日時に変更され、新しいコピーがダウンロードされます。ブラウザに:
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>
次に...プログラムの残りの部分...
この問題を解決するのに少し時間がかかりました(多くのブラウザーはコマンドによって動作が異なりますが、ファイルの時間をチェックし、ブラウザーでダウンロードしたコピーと比較します(日付と時刻が異なる場合は、更新が行われます)。想定された正しい方法を実行することはできません。それには、別の使用可能なより良い解決策が常にあります。よろしくと幸せなキャンプ。ちなみにtouch(); または代替手段は、javascript bash sh phpを含む多くのプログラミング言語で機能し、それらをhtmlに含めたり、htmlに呼び出したりできます。