Я розробляю веб-сайт на основі вихідного коду Wordpress через XAMPP. Іноді я міняю код CSS, сценарії чи щось інше, і я помічаю, що моєму браузеру потрібен час, щоб застосувати зміни. Це змушує мене використовувати декілька браузерів для оновлення одного, і якщо не застосовується нові стилі, я спробую другий, і це завжди це.
Є якийсь спосіб уникнути цієї проблеми? Іноді я змінюю код, не повідомляючи попередні зміни.
Відповіді:
Натискання Ctrl+ F5(або Ctrl+ Shift+ R) для примусового перезавантаження кешу. Я вважаю, що Mac використовує Cmd+ Shift+ R.
У 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, клацнувши на піктограму шестірні в правому нижньому куті та вибравши Вимкнути кеш у діалоговому вікні налаштувань, наприклад:
Зображення взято з цієї відповіді .
Введіть about:configу рядок URL-адреси, а потім знайдіть запис із назвою 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(); ?>" />
Це завжди освіжить!
EDIT: Звичайно, це насправді не практично для цілого веб-сайту, оскільки ви б не додавали це вручну для всього.
Перевірте це: Як змусити браузер використовувати найновішу версію таблиці стилів?
Якщо припустити, що ваш файл 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 було єдиним рішенням, яке я міг приступити до роботи: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
Прийнята відповідь вище є правильною. Однак, якщо ви хочете лише періодично перезавантажувати кеш, і ви використовуєте Firefox, інструменти веб-розробника (у пункті меню Інструменти станом на листопад 2015 року) надають параметр Мережа. Сюди входить кнопка перезавантаження. Виберіть Перезавантажити для одноразового скидання кешу.
Якщо ви хочете бути впевнені, що ці файли Chrome належним чином оновлено для всіх користувачів, тоді вам потрібно мати must-revalidateвCache-Control заголовку. Це змусить Chrome повторно перевірити файли, чи потрібно їх повторно завантажувати.
Рекомендуйте такий заголовок відповіді:
Cache-Control: must-validate
Це повідомляє Chrome перевірити сервер і перевірити, чи є новий файл. Якщо є новий файл, він отримає його у відповіді. Якщо ні, він отримає відповідь 304 і гарантію, що відповідь у кеш-пам’яті актуальна.
Якщо ви НЕ встановите цей заголовок, то за відсутності будь-якого іншого налаштування, яке робить файл недійсним, Chrome ніколи не перевірятиме на сервері, чи існує нова версія.
Замість тегу link у 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()зробить. Залишати це у своєму коді назавжди не дуже хороша ідея, оскільки це лише уповільнить завантаження сторінки і, можливо, не є необхідним.
Я виявив, що примусове оновлення таблиці стилів корисно, якщо ви внесли значні зміни в макет сторінки і доступ до нової таблиці стилів є життєво важливим для того, щоб на екрані з’явилося щось розумне.