Заставить браузер обновлять css, javascript и т. Д.

Я разрабатываю веб-сайт на основе исходного кода Wordpress через XAMPP. Иногда я меняю код CSS, сценарии или что-то еще и замечаю, что моему браузеру требуется время, чтобы применить изменения. Это заставляет меня использовать несколько браузеров для обновления одного, и если новые стили не применяются, я пробую второй, и он всегда так.

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

Общее решение

Нажатие Ctrl+ F5(или Ctrl+ Shift+ R) для принудительной перезагрузки кеша. Я считаю, что Mac используют Cmd+ Shift+ R.

PHP

В PHP вы можете отключить кеш, установив дату истечения срока действия на время в прошлом с заголовками:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Хром

Кеш Chrome можно отключить, открыв инструменты разработчика с помощью F12, щелкнув значок шестеренки в правом нижнем углу и выбрав Отключить кеш в диалоговом окне настроек, например:

^{Изображение взято из этого ответа .}

Fire Fox

Введите about:configв адресную строку и найдите запись с названием network.http.use-cache. Установите это на false.

Если вы хотите избежать этого на стороне клиента, вы можете добавить что-то вроде ?v=1.xссылки на файл css при изменении содержимого файла. например, если он был, <link rel="stylesheet" type="text/css" href="css-file-name.css">вы можете изменить его, чтобы <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">обойти кеширование.

Если вы умеете писать php, вы можете написать:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

Он всегда будет обновляться!

РЕДАКТИРОВАТЬ: Конечно, это непрактично для всего веб-сайта, так как вы не добавляете это вручную для всего.

Проверьте это: Как заставить браузер использовать новейшую версию моей таблицы стилей?

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

<link rel="stylesheet" href="foo.css?v=1.1">

Точка зрения разработчика
Если вы находитесь в режиме разработки (как в исходном вопросе), лучший подход - отключить кеширование в браузере с помощью метатегов HTML. Чтобы сделать этот подход универсальным, вы должны вставить как минимум три метатега, как показано ниже.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

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

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

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Он обновится при изменении.

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

Попробуйте очистить кеш браузера.

Вы можете отключить кеширование с помощью панели инструментов веб-разработчика Firefox.

Это расширение Firefox было единственным решением, с которым я мог работать: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

Принятый выше ответ правильный. Однако, если вы хотите периодически перезагружать кеш и используете Firefox, инструменты веб-разработчика (по состоянию на ноябрь 2015 года в пункте меню «Инструменты») предоставляют параметр «Сеть». Это включает в себя кнопку перезагрузки. Выберите Reload для однократного сброса кеша.

Если вы хотите быть уверены, что эти файлы должным образом обновляются Chrome для всех пользователей, тогда вам нужно иметь must-revalidateв Cache-Controlшапке. Это заставит Chrome повторно проверять файлы, чтобы увидеть, нужно ли их повторно загружать.

Порекомендуйте следующий заголовок ответа:

Cache-Control: must-validate

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

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

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

Вместо тега ссылки в html-head к внешнему файлу css используйте php-include:

<style>
<?php
include("style.css");
?>      
</style>

Вроде хак, но у меня работает :)

Я решил, что, поскольку браузеры не проверяют наличие новых версий файлов css и js, я переименовываю свои каталоги css и js всякий раз, когда вношу изменения. Я использую css1 до css9 и js1 до js9 в качестве имен каталогов. Когда я дохожу до 9, я начинаю сначала с 1. Это неприятно, но каждый раз это работает отлично. Смешно просить пользователей печатать.

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

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

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Тем не менее, я также использую клиентскую функцию javascript для тщательной замены узлов и атрибутов при изменении содержимого HTML, то есть тег ссылки таблицы стилей не будет заменен, изменится только атрибут href.

Этот сценарий отлично работает в Chrome, Firefox и Edge в Windows, а также в Chrome на Android, но, к моему удивлению, не всегда работает в веб-клиентах на Android. Итак, я более или менее ищу что-то, чтобы принудительно / запустить обновление с помощью javascript - оптимально без необходимости перезагружать страницу.

Попробуй это:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

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

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