Кэш браузера. Победа на фронте

Разумеется, это, скорее нештатная ситуация, когда у вас есть задачи по фронт-энду, а кэширование не поддается управлению. В большинстве случаев у разработчиков либо все «рычаги» под рукой, либо помогают народные средства типа галочки Disable cache в инструментах браузера.

На этот случай человечество придумало парочку мета-тегов, призванных помочь верстальщикам в их нелегком труде.

Запрет кэширование браузером и прокси-сервером

<meta http-equiv=«Cache-Control» content=«no-cache» />

Запрет на кэширование страницы только браузером

<meta http-equiv=«Cache-Control» content=«private» />

Установка кэширования на заданное время

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

<meta http-equiv=«Cache-Control» content=«max-age=3600, must-revalidate» />

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

<link rel=«stylesheet» href=»/css/style.css?v=2.1» />

Полное игнорирование кэша

Но как сообщить браузеру, что файл изменен, и не проставлять версию вручную?.. Тут стоит упомянуть, что есть способ, подразумевающий написание громоздкого javascript-куска, который будет выяснять — изменился ли файл перед загрузкой. Чтобы не применять этот способ, мы решили поступить по-другому. Что если добавлять текущее время в версию файла?

<link rel=«stylesheet» href=»/css/style.css?v=<? echo date('d-m-Y-h-s');? >» />

Важно, как ни странно, добавлять год и месяц, иначе, например, 12 числа следующего месяца в 14:15:05 на сайте отобразятся стили промежуточной версии по состоянию на 12-е число текущего (тогда уже прошлого) месяца в 14:15:05. Да и вообще, чем больше цифр, тем на большее время можно забыть об этом временном решении. Главное, не забывать, что это решение — временное.