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

Question

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

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

Answer 1

Если это примерно .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.

Вы можете проверить эту ссылку , чтобы увидеть, как она может работать.

Answer 2

Посмотрите на элемент управления кэшем и expires META Tag.

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

Answer 3

Обновление 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 Developer Network, на который я ссылался в 2012 году:

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

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

Answer 4

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

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

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

Другой, менее чистый, но иногда единственный способ, если вы не можете контролировать заголовки на стороне сервера, - добавить случайный параметр GET к ресурсу, который вызывается:

myimage.gif?random=1923849839

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

У меня был случай, когда я делал фотографии клиентов онлайн, и мне нужно было бы обновить div, если фотография изменилась. Браузер все еще показывал старую фотографию. Поэтому я использовал хак для вызова случайной переменной GET, которая будет уникальной каждый раз. Вот если бы это могло помочь кому-нибудь

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

EDIT Как отмечают другие, следующее является гораздо более эффективным решением, поскольку оно будет перезагружать изображения только после их изменения, идентифицируя это изменение по размеру файла:

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

Answer 8

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

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

Answer 9

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

/custom.js?id=1

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

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

Answer 10

Не уверен, что это действительно может вам помочь, но именно так кэширование должно работать в любом браузере. Когда браузер запрашивает файл, он всегда должен отправлять запрос на сервер, если не существует «автономного» режима. Сервер будет читать некоторые параметры, такие как дата изменения или 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 цента!