Заставить браузер очистить кэш

Question

Заставить браузер очистить кэш

есть ли способ, которым я могу поместить некоторый код на свою страницу, поэтому, когда кто-то посещает сайт, он очищает кэш браузера, чтобы они могли просматривать изменения?

используемые языки: ASP.NET, VB.NET и, конечно же, HTML, CSS и jQuery.

17 239

html cross-browser caching meta-tags

17 ответов:

посмотреть в cache-control и истекает мета-тег.

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

89

обновление 2012

Это старый вопрос, но я думаю, что он нуждается в более актуальном ответе, потому что теперь есть способ иметь больше контроля над кэшированием веб-сайта.

на Автономные Веб-Приложения (что действительно любой сайт 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 года,стандарт HTML, раздел 7.9, автономные веб-приложения включает в себя предупреждение об устаревании:

эта функция находится в процессе удаления с веб-платформы. (Это долгий процесс, который занимает много лет.) Использование любого из автономные функции веб-приложения в это время крайне не рекомендуется. Пользоваться услугой вместо рабочих.

так же как и использование кэша приложения в сети разработчиков Mozilla, на которую я ссылался в 2012 году:

устаревший
эта функция была удалена из веб-стандартов. Хотя некоторые браузеры все еще могут поддерживать его, он находится в процессе быть сняты. Не используйте его в старых или новых проектах. Страницы или веб-приложения использование его может сломаться в любое время.

см. также ошибка 1204581-добавить a уведомление об устаревании для AppCache, если включен перехват выборки работника службы.

68

нет как таковой. Один из способов-отправить соответствующие заголовки при доставке контента, чтобы заставить браузер перезагрузиться:

убедившись, что веб-страница не кэшируется, во всех браузерах.

Если ваш поиск "cache header" или что-то подобное здесь на SO, вы найдете ASP.NET конкретные примеры.

другой, менее чистый, но иногда единственный способ, если вы не можете управлять заголовками на стороне сервера, - это добавление случайного параметра GET к ресурсу, который называется:
myimage.gif?random=1923849839

25

на статические ресурсы правильное кэширование было бы использовать параметры запроса со значением каждой версии развертывания или файла. Это будет иметь эффект очистки кэша после каждого развертывания.
/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" />
Не забудьте обновить версию сборки.

13

у меня была аналогичная проблема, и вот как я ее решил:
на index.html файл я добавил манифест:
<html manifest="cache.manifest">
на <head> в раздел включен скрипт обновления кэша:
<script type="text/javascript" src="update_cache.js"></script>
на <body> раздел я вставил функцию onload:
<body onload="checkForUpdate()">
на cache.manifest я поставил все файлы, которые я хочу кэшировать. Теперь важно, что он работает в моем случае (Apache) просто обновляя каждый раз комментарий" версия". Это также возможность назвать файлы с "?Вер=001" или что-то в конце имени, но это не нужны. Изменение просто # version 1.01 запускает событие обновления кэша.
CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other files
важно включить 1., 2. и 3. очки только в индекс.формат 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();
}
теперь вы просто изменить файлы и в манифесте вы должны обновить версию комментария. Теперь посещение индекса.HTML-страница будет обновить кэш.

части решения не мои, но я нашел их через интернет и собрал вместе, чтобы он работал.

5

у меня был случай, когда я бы фотографировал клиентов в интернете и должен был бы обновить div, если фотография будет изменена. Браузер все еще показывал старую фотографию. Поэтому я использовал Хак вызова случайной переменной GET, которая была бы уникальной каждый раз. Вот если бы это могло помочь кому-нибудь
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...
изменить Как указывали другие, следующее гораздо более эффективное решение, поскольку оно будет перезагружать изображения только при их изменении, идентифицируя это изменение файлом размер:
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

5

<meta http-equiv="pragma" content="no-cache" />
Также см. https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images

2

Не уверен, что это может действительно помочь вам, но именно так кэширование должно работать в любом браузере. Когда браузер запрашивает файл, он всегда должен отправлять запрос на сервер, если нет режима "offline". Сервер будет читать некоторые параметры, такие как дата изменения или etags.

сервер вернет 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 цента!

2

многие ответы не хватает точки-большинство разработчиков хорошо знают, что отключение кэша неэффективно. Однако существует много распространенных обстоятельств, когда эффективность не имеет значения, а поведение кэша по умолчанию сильно нарушено.

Они включают в себя вложенные, итерационные скрипты тестирования (большой!) и сломанные сторонние программные решения. Ни одно из приведенных здесь решений не является адекватным для решения таких распространенных сценариев. Большинство веб-браузеров слишком агрессивное кэширование и не предоставляют никаких разумных средств, чтобы избежать этих проблем.

2

обновление URL для следующих работ для меня:

/custom.js?id=1

добавляя уникальное число после ?id= и увеличивая его для новых изменений, пользователи не должны нажимать CTRL + F5 обновить кэш. Кроме того, вы можете добавить хэш или строковую версию текущего времени или эпохи после ?id=

что-то вроде ?id=1520606295

2

здесь является ли страница 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

я реализовал это простое решение, которое работает для меня (но не в производственной среде):
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 вы можете использовать cookies или другое постоянное клиентское хранилище)

Я выбрал это решение для его простоты, потому что только один файл "versio.txt " заставит весь сайт перезагрузиться.

метод queryString трудно реализовать, а также кэшируется (если вы измените с v1.1 на предыдущую версию будет загружаться из кэша, то это означает, что кэш не сбрасывается, сохраняя все предыдущие версии в кэше).

Я немного Новичок и Я бы оценил вашу профессиональную проверку и обзор, чтобы убедиться, что мой метод является хорошим подходом.

надеюсь, что это помогает.

1

в дополнение к настройке Cache-control: no-cache, вы также должны установить заголовок Expires равным -1, Если вы хотите, чтобы локальная копия обновлялась каждый раз (некоторые версии IE, похоже, требуют этого).

посмотреть http Cache-проверьте с сервером, всегда отправляя If-Modified-Since

0

есть один трюк, который можно использовать.Хитрость заключается в том, чтобы добавить параметр / строку к имени файла в теге сценария и изменить его при изменении файла.

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

браузер интерпретирует всю строку как путь к файлу, хотя что происходит после "?- это параметры. Так что теперь происходит то, что в следующий раз, когда вы обновляете свой файл, просто измените номер в теге скрипта на своем веб-сайте (пример <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.

0

вы хотите очистить кэш, или просто убедитесь, что ваш текущий (изменен?) страница не кэшируется?

Если последнее, то оно должно быть таким же простым, как
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

-1

Fermin · Accepted Answer · 2014-10-23 10:24:25

если речь идет о .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.
вы можете проверить это ссылке чтобы посмотреть, как это может работать.