Принудительно очистите кэш браузера

StackOverflow https://stackoverflow.com/questions/1922910

Вопрос

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

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

Это было полезно?

Решение

Если это о .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 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 года, и теперь кажется, что он уже устарел.Благодаря кгалдиоло за то, что указал на это в комментариях.

В настоящее время, по состоянию на июль 2016 г. Стандарт HTML, Раздел 7.9, Автономные веб-приложения включает предупреждение об устаревании:

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

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

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

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

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

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

Если ваш поиск "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" />

Не забудьте обновить версию сборки.

У меня была похожая проблема, и вот как я ее решил:

  1. В index.html файл, в который я добавил манифест:

    <html manifest="cache.manifest">

  2. В <head> в разделе включен скрипт обновления кеша:

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

  3. В <body> раздел, в который я вставил функцию загрузки:

    <body onload="checkForUpdate()">

  4. В 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

    происходит потому, что каждый «дочерний» файл пытается кэшировать страницу, хотя страница уже кэширована.

  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 обновит кеш.

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

У меня был случай, когда я фотографировал клиентов онлайн, и мне нужно было обновить 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" />

Также см https://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images

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

Сервер вернет ответ об ошибке 304 для NOT MODIFIED, и браузеру придется использовать свой кеш.Если etag не проходит проверку на стороне сервера или дата изменения ниже текущей даты изменения, сервер должен вернуть новый контент с новой датой изменения или etags, или с тем и другим.

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

Вот как это следует сделать.Использование случайных параметров или номера версии в URL-адресах больше похоже на взлом, чем на что-либо еще.

http://www.checkupdown.com/status/E304.htmlhttp://en.wikipedia.org/wiki/HTTP_ETaghttp://www.xpertdeveloper.com/2011/03/last-modified-header-vs-expire-header-vs-etag/

Прочитав, я увидел, что есть еще и срок годности.Если у вас возникла проблема, возможно, у вас установлен срок действия.Другими словами, когда браузер будет кэшировать ваш файл, поскольку у него есть дата истечения срока действия, ему не придется запрашивать его снова до этой даты.Другими словами, он никогда не запросит файл на сервере и никогда не получит код 304 без изменений.Он будет просто использовать кеш до тех пор, пока не истечет срок годности или пока кеш не будет очищен.

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

Если люди склонны часто обновлять файл, а файл не сильно меняется, возможно, было бы разумно установить большую дату истечения срока действия.

Мои 2 цента!

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

/custom.js?id=1

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

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

Здесь — это страница 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

Я реализовал это простое решение, которое работает у меня (еще не в производственной среде):

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:

"версия.txt":

v00.5.0014

Эта функция вызывается на всех моих страницах, поэтому при загрузке она проверяет, ниже ли значение версии localStorage, чем текущая версия, и выполняет 

location.reload(true);

...чтобы принудительно перезагрузить сервер, а не кэш.

(очевидно, вместо localStorage вы можете использовать файлы cookie или другое постоянное клиентское хранилище)

Я выбрал это решение из-за его простоты, поскольку сохранение только одного файла «versio.txt» приведет к перезагрузке всего сайта.

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

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

Надеюсь, поможет.

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

Видеть HTTP Cache — проверка с сервером, всегда отправка If-Modified-Since

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

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

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

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

Если последнее, то это должно быть так же просто, как 

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top