Предположим, вы разработчик и внесли определенные изменения в файлы стилей сайта (css), а также в файлы, где хранится код написанный на языке javascript. Что произойдет, если на сайт зайдёт посетитель, который ранее уже посещал странички вашего бесподобного ресурса?
Он увидит старый дизайн. А его браузер запустит «старый» код javascript, что вероятно приведет к ошибке в работе сайта.
Всё это произойдет потому что браузер каждого посетителя старательно кеширует файлы стилей, javascript, изображения и прочий контент.
При этом изображения, видео и прочий медиа контент, который может оказаться в кеше браузера нас интересует мало поскольку он, как правило, не влияет на функциональность сайта.
А вот, со стилями и javascript мы вынуждены что-то предпринять, каким то образом заставить браузер посетителя сайта загрузить обновленные версии файлов.
Как в HTML документе подключается CSS и JavaScript?
Напомню, что в HTML документе внешний файл CSS подключается с помощью тега LINK:
<link href="/каталог где находится ваш css файл/file.css" rel="stylesheet">
Внешний файл с Javascript кодом подключается с помощью тега SCRIPT:
<script src="/каталог где находится ваш javascript файл/file.js" ></script>
Как сообщить браузеру посетителя о том, что версия файла обновилась?
На самом деле, сделать это очень просто.
Достаточно в имени файла, после его расширения, добавить что то вроде:
?version=1
В итоге подключение наших файлов будет выглядеть так:
<link href="/каталог где находится ваш css файл/file.css?version=1" rel="stylesheet">
И, соответственно, для подключения JavaScript:
<script src="/каталог где находится ваш javascript файл/file.js?version=1" ></script>
Вместо единички можно указывать свой номер версии файла и каждый раз менять его при обновлении файлов.
Как автоматизировать процесс добавления версии к файлам CSS и JS?
Если над действующим сайтом в процессе его существования происходит регулярная работа по изменению файлов стилей и javascript кода, у разработчика рано или поздно появляется желание автоматизировать процесс добавления новой версии файла.
Сделать это таким образом, чтобы в будущем не задумываться о том, а поменял ли он номер версии в коде и не получит ли посетитель ошибку, поскольку его браузер открыл старую версию файлов?
Здесь нам на помощь приходит PHP.
А именно: встроенная функция filemtime, которая возвращает время последнего изменения файла.
Так как время возвращается в формате временной метки Unix, нам достаточно вставить полученный результат в наш HTML код подключения файлов.
В итоге мы получим что то вроде:
<?php $filemtime = filemtime('абсолютный путь к файлу на сервере/file.css') ?>
<link href="/относительный путь к файлу/file.css?v=<?php echo $filemtime ?>" rel="stylesheet">
Аналогичным образом мы можем подключить и JavaScript файлы.
И навсегда забыть о том, что после изменения файлов стилей или JS кода, необходимо обновить версию файла.
Заключение
Надеюсь, представленная выше информация оказалась полезной и оказала положительное влияние на вашу жизнь. Если у вас остались вопросы и предложения, с радостью выслушаю их в своей группе VK по ссылке ниже:
С уважением, Владимир Егоров
