Заставить браузер очистить кеш
Есть ли способ, которым я могу разместить некоторый код на своей странице, чтобы, когда кто-то посещает сайт, он очищал кеш браузера, чтобы они могли просматривать изменения?
Используемые языки: ASP.NET, VB.NET и, конечно, HTML, CSS и jQuery.
24 ответа
Если это о .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.
Вы можете проверить эту ссылку, чтобы увидеть, как это может работать.
Посмотрите в кэш-контроль и мета-тег истекает.
<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>
Обновление 2012
Это старый вопрос, но я думаю, что он требует более актуального ответа, потому что теперь есть способ лучше контролировать кэширование сайта.
В автономных веб-приложениях (это действительно любой веб-сайт HTML5) applicationCache.swapCache()может использоваться для обновления кэшированной версии вашего сайта без необходимости перезагрузки страницы вручную.
Это пример кода из Руководства для начинающих по использованию кэша приложений на HTML5-скалах, объясняющего, как обновить пользователей до последней версии вашего сайта:
// 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 года стандарт HTML, раздел 7.9 "Автономные веб-приложения" содержит предупреждение об устаревании:
Эта функция находится в процессе удаления с веб-платформы. (Это долгий процесс, который занимает много лет.) В настоящее время использовать любые функции автономного веб-приложения крайне не рекомендуется. Вместо этого используйте сервисных работников.
То же самое касается использования кеша приложений в Mozilla Developer Network, на который я ссылался в 2012 году:
Устаревшие
Эта функция была удалена из веб-стандартов. Хотя некоторые браузеры все еще могут поддерживать его, он находится в процессе удаления. Не используйте его в старых или новых проектах. Страницы или веб-приложения, использующие его, могут сломаться в любое время.
Не как таковой. Одним из методов является отправка соответствующих заголовков при доставке контента, чтобы заставить браузер перезагрузиться:
Убедитесь, что веб-страница не кэшируется во всех браузерах.
Если ваш поиск "cache header" или что-то подобное здесь на SO, вы найдете конкретные примеры ASP.NET.
Другой, менее чистый, но иногда единственный способ, если вы не можете контролировать заголовки на стороне сервера, - это добавить случайный параметр GET к ресурсу, который вызывается:
myimage.gif?random=1923849839
У меня была похожая проблема, и вот как я ее решил:
В
index.htmlфайл, который я добавил манифест:<html manifest="cache.manifest">В
<head>В раздел включены скрипты обновления кеша:<script type="text/javascript" src="update_cache.js"></script>В
<body>раздел я вставил функцию загрузки:<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 позволит обновить кеш.
Части решения не мои, но я нашел их через Интернет и собрал так, чтобы это работало.
Для статических ресурсов правильным кэшированием будет использование параметров запроса со значением каждого развертывания или версии файла. Это будет иметь эффект очистки кэша после каждого развертывания.
/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" />
Не забудьте обновить версию сборки.
2023 г. и далее
На момент написания статьи многие веб-браузеры поддерживалиClear-Site-DataЗаголовок HTTP [ссылка MDN]. Чтобы клиентский веб-браузер очистил кеш для домена веб-сайта и поддоменов, установите следующий заголовок в ответе HTTP от сервера:
Clear-Site-Data: "cache"
В качестве альтернативы, следующий заголовок может лучше поддерживаться в разных браузерах, но он очищает другие данные веб-сайта, такие как localStorage и файлы cookie, в дополнение к кешу.
Clear-Site-Data: "*"
Однако обратите внимание, что промежуточные кеши (например, CDN) могут не понимать или не учитывать этот заголовок, поэтому промежуточные кеши могут по-прежнему отвечать ранее кэшированными данными.
У меня был случай, когда я делал фотографии клиентов онлайн, и мне нужно было бы обновить div, если фотография была изменена. Браузер все еще показывал старую фотографию. Поэтому я использовал хак для вызова случайной переменной GET, которая будет уникальной каждый раз. Вот если бы это могло кому-нибудь помочь
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...
РЕДАКТИРОВАТЬ Как указали другие, следующее является гораздо более эффективным решением, поскольку оно будет перезагружать изображения только после их изменения, определяя это изменение по размеру файла:
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"
Многие ответы не имеют смысла - большинство разработчиков хорошо знают, что отключение кеша неэффективно. Однако существует много общих обстоятельств, когда эффективность не важна, а поведение кэша по умолчанию сильно нарушено.
Они включают в себя вложенное итеративное тестирование сценариев (большое!) И неработающие обходные пути программного обеспечения сторонних производителей. Ни одно из приведенных здесь решений не подходит для решения таких распространенных сценариев. Большинство веб-браузеров слишком агрессивно кешируют и не предоставляют разумных средств, чтобы избежать этих проблем.
Обновление URL до следующего работает для меня:
/custom.js?id=1
Добавляя уникальный номер после ?id= и увеличивая его для новых изменений, пользователи не должны нажимать CTRL + F5 обновить кеш. Кроме того, вы можете добавить хэш или строковую версию текущего времени или эпохи после ?id=
Что-то вроде ?id=1520606295
<meta http-equiv="pragma" content="no-cache" />
Также см. /questions/9120333/kak-zastavit-veb-brauzer-ne-keshirovat-izobrazheniya
Не уверен, что это действительно может вам помочь, но именно так кэширование должно работать в любом браузере. Когда браузер запрашивает файл, он всегда должен отправлять запрос на сервер, если не существует "автономного" режима. Сервер будет читать некоторые параметры, такие как дата изменения или etags.
Сервер вернет сообщение об ошибке 304 для NOT MODIFIED, и браузер должен будет использовать его кэш. Если 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 цента!
Существует один прием, который можно использовать. Он заключается в добавлении параметра / строки к имени файла в теге сценария и изменении его при внесении изменений в файл.
<script src="myfile.js?version=1.0.0"></script>
Браузер интерпретирует всю строку как путь к файлу, даже несмотря на то, что идет после "?" параметры. Так что сейчас происходит то, что в следующий раз, когда вы обновите свой файл, просто измените номер в теге script на вашем сайте (пример <script src="myfile.js?version=1.0.1"></script>) и каждый пользовательский браузер увидит, что файл изменился, и получит новую копию.
Я реализовал это простое решение, которое работает для меня (еще не в производственной среде):
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 вы можете использовать куки или другое постоянное клиентское хранилище)
Я выбрал это решение из-за его простоты, потому что только поддержка одного файла "versio.txt" приведет к полной перезагрузке сайта.
Метод queryString сложно реализовать, и он также кэшируется (если вы перейдете с v1.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
В дополнение к установке Cache-control: no-cache, вы также должны установить заголовок Expires равным -1, если вы хотите, чтобы локальная копия обновлялась каждый раз (в некоторых версиях IE это требуется).
См. HTTP Cache - проверьте с сервером, всегда отправляя If-Modified-Since
в рабочих js
self.addEventListener('message', function(event){
msg = event.data;
if (msg==='clearCache') {
console.log('Starting to cache clean.');
deleteCacheAndMetadata("WebFontFiles");
deleteCacheAndMetadata("Static");
deleteCacheAndMetadata("WebFontCss");
deleteCacheAndMetadata("Assets");
deleteCacheAndMetadata("Tweets");
console.log('Cache Cleaned');
}
});
async function deleteCacheAndMetadata(cacheName) {
await caches.delete(cacheName);
const cacheExpiration = new CacheExpiration(cacheName);
cacheExpiration.delete();
}
затем добавьте переменную this js в код заголовка.`
<script>
var updateRequire = false; // or true
</script>
наконец добавьте этот код нижнего колонтитула
window.addEventListener('load', function(e) {
if (updateRequire) {
navigator.serviceWorker.controller.postMessage('clearCache');
if (confirm("Application updated! Please confirm to reload page!")) window.location.reload();
}
},false);
Заставить браузеры очистить кеш или перезагрузить правильные данные? Я попробовал большинство решений, описанных в stackru, некоторые из них работают, но через некоторое время он в конце концов кеширует и отображает предыдущий загруженный скрипт или файл. Есть ли другой способ очистить кеш (css, js и т. Д.) И фактически работать во всех браузерах?
До сих пор я обнаружил, что определенные ресурсы могут быть перезагружены индивидуально, если вы измените дату и время для ваших файлов на сервере. "Очистить кеш" не так просто, как должно быть. Вместо очистки кэша в моих браузерах я понял, что "касание" кэшированных файлов сервера фактически изменит дату и время исходного файла, кэшированного на сервере (протестировано на Edge, Chrome и Firefox), и большинство браузеров автоматически загрузит большинство текущая свежая копия того, что на вашем сервере (код, графика и любые мультимедиа тоже). Я предлагаю вам просто скопировать самые последние сценарии на сервере и решить проблему "сделать что-то на ощупь" перед запуском вашей программы, поэтому она изменит дату всех ваших проблемных файлов на самую последнюю дату и время, а затем загрузит свежую копию в ваш браузер:
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>
тогда... остальная часть вашей программы...
Мне потребовалось некоторое время, чтобы решить эту проблему (поскольку многие браузеры по-разному работают с разными командами, но все они проверяют время файлов и сравнивают их с загруженной в браузере копией, если обновление даты и времени будут выполнять обновление), если вы не может идти по правильному пути, всегда есть другое полезное и лучшее решение. С наилучшими пожеланиями и счастливого кемпинга. Кстати коснитесь (); или альтернативы работают на многих языках программирования, включая javascript bash sh php, и вы можете включить или вызвать их в html.
Это простое решение, которое я использовал в одном из своих приложений с использованием PHP.
Все файлы JS и CSS помещаются в папку с названием версии. Пример: "1.0.01"
root\1.0.01\JS
root\1.0.01\CSS
Создал помощник и определил там номер версии
<?php
function system_version()
{
return '1.0.07';
}
И связанные файлы JS и SCC, как показано ниже.
<script src="<?= base_url(); ?>/<?= system_version();?>/js/generators.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>/<?= system_version(); ?>/css/view-checklist.css" />
Всякий раз, когда я вношу изменения в любой файл JS или CSS, я меняю версию системы в Helper, переименовываю папку и развертываю ее.
в случае заинтересованности я нашел свое решение для обновления браузеров .css и .js в контексте .NET MVC (.net fw 4.8) и использования пакетов. Я хотел, чтобы браузеры обновляли кэшированные файлы только после развертывания новой сборки.
Опираясь на ответ Паулиуса Залиадуониса, мое решение выглядит следующим образом:
- сохраните базовый URL-адрес вашего приложения в настройках приложения веб-конфигурации (HttpContext еще недоступен во время выполнения во время RegisterBundle...), затем измените этот параметр в соответствии с конфигурацией (отладка, подготовка, выпуск...) с помощью xml трансформировать
- В BundleConfig RegisterBundles получают версию сборки средствами отражения, и...
- ... измените формат тегов по умолчанию для стилей и скриптов, чтобы система связывания генерировала теги ссылок и скриптов, добавляя к ним параметр строки запроса.
Вот код
public static void RegisterBundles(BundleCollection bundles)
{
string baseUrl = system.Configuration.ConfigurationManager.AppSettings["by.app.base.url"].ToString();
string assemblyVersion = Assembly.GetExecutingAssembly().GetName().Version.ToString();
Styles.DefaultTagFormat = $"<link href='{baseUrl}{{0}}?v={assemblyVersion}' rel='stylesheet'/>";
Scripts.DefaultTagFormat = $"<script src='{baseUrl}{{0}}?v={assemblyVersion}'></script>";
}
Вы получите такие теги, как
<script src="https://example.org/myscriptfilepath/script.js?v={myassemblyversion}"></script>
вам просто нужно не забыть создать новую версию перед развертыванием.
Чао
Для пользователей webpack: -
Я добавил время с chunkhash в конфигурацию моего веб-пакета. Это решило мою проблему недействительности кеша при каждом развертывании. Также нам нужно позаботиться о том, чтобы index.html/ asset.manifest не кешировался ни в вашем CDN, ни в браузере. Конфигурация имени чанка в конфиге webpack будет выглядеть так:-
fileName: [chunkhash]-${Date.now()}.js
или Если вы используете contenthash, тогда
fileName: [contenthash] - $ {Date.now ()}. js.
У меня была та же проблема, все, что я сделал, это изменил имена файлов, которые связаны с моим файлом index.html, а затем перешел в файл index.html и обновил их имена, не лучшая практика, но если это работает, это работает. Браузер видит их как новые файлы, поэтому они повторно загружаются на устройство пользователя.
пример: я хочу обновить файл css с именем styles.css, изменить его на styles.css
Перейдите в index.html и обновите и измените его на
Если вы разработчик Wordpress, у меня для вас отличные новости.
Просто найдите, установите и активируйте плагин Wordpress под названием: Busted.
Конфигурация не требуется.
Он автоматически принудительно обновляет кеш, если контент был обновлен, и полностью и надежно решает эту проблему. Протестировано и используется на сотнях клиентских сайтов Wordpress - отлично работает везде.
Не могу рекомендовать это достаточно.
Если вы используете Wordpress, это, безусловно, ваш лучший вариант и наиболее элегантное решение этой проблемы.
Наслаждайтесь!
Вы хотите очистить кеш или просто убедитесь, что ваша текущая (измененная?) Страница не кешируется?
Если последнее, это должно быть так же просто, как
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">