Как контролировать кэш CSS и скриптов

Браузер намертво кэширует стили и скрипты? Обновление стилий происходит только после нажатия клавиш Ctrl+f5? А при обычном обновлении страницы упорно продолжают подгружаться устаревшие css, скрипты и прочие файлы, который вы, будучи разработчиком уже поправили.

Такая ситуация не редка, и может весьма раздражать, заставляя буквально каждый раз вручную обновлять кэш, зижимая Ctrl+f5. Но неудобство на рабочем компьютере — пол беды. А реальные проблемы могут возникунуть:

  • При просмотре сайта заказчиком, которого не всегда можно научить "правильно перезагружить страницу"
  • При тестировании на мобильном устройстве, где скинуть кэш бывает совсем не просто

Решение проблемы кыширования CSS и скриптов

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

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

Именно таким образом интернет-гиганты обновляют дизайн у всех пользователей, не прося каждого нажать Ctrl+f5.

function fileCashFix($input){
    $file_path = $_SERVER['DOCUMENT_ROOT'].$input;
    if(file_exists($file_path)){
        return $input."?".md5_file($file_path);
    }else{
        return $input;
    }
}

После того как вы так или иначе применили этот подход вы можете:

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

Сниппет для MODx

  • Название сниппета: fileCashFix
  • Использование сниппета: <link href="[[!fileCashFix?input=`css/style.css`]]" rel="stylesheet">
$file_path = MODX_BASE_PATH.$input;
if(file_exists($file_path)){
    return $input."?".md5_file($file_path);
}else{
    return $input;
}

Для внешнего файла

! Запрос file_get_contents($input) может замедлять работу сайта, так как закачивает файл на сервер.

Использование сниппета: [[!fileCashFix?input=`https://fonts.googleapis.com/css?family=Roboto:400`]]. Важно указать именно https:// или https:// — просто // не пройдет.

$file_path = MODX_BASE_PATH.$input;
if(file_exists($file_path)){
    return $input."?".md5_file($file_path);
}else{
    // Если не нашли файл у себя, может быть передана ссылка на внешний файл
    $external_file = file_get_contents($input);
    if($external_file){
        // Проверяем, есть ли уже GET-параметры в запросе к файлу
        if(strpos($input, "?") !== false){
            return $input."&fileCashFix=".md5($external_file);
        }else{
            return $input."?fileCashFix=".md5($external_file);
        }
    }else{
        return $input;
    }
}
Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

Комментарии easyComm

Дмитрий 28 марта 2018, 14:51

Не подождите...
Например, в своей реализации я в md5_file() НЕ передаю адрес файла скаченного на сервер.
Я прочитал, что в новой версии php md5_file() умеет внешние ссылки отрабатывать поэтому сразу дал исходный файл.

Администратор

:)
Ок, а как по-вашему он обрабатывает внешние ссылки? Ну вот просто логически поразмыслите... Можно ли обработать файл, не имея его у себя? Мы ведь не отправляем воркер на ТОТ сервер, как это бывает в работе с BigData. Мы просто скачиваем файл в какую-нибудь папку temp, работаем с ним и удаляем без следа. Это можно сравнить с работой браузера — браузер скачивает страницу сайта из интернета, чтобы отобразить ее для пользователя.
...А время дополнительное уходит потому что для скачивания файла нужно сделать все то же, что и браузеру - поиск DNS, ожидание ответа того сервера, время на загрузку, то-сё... И если это статичный маленький файл - хорошо, а если мы запрашиваем какой-нибудь условно XML на 150мб, генерируемый на лету, то задержка будет еще и из-за того, что файл долго генерировался где-то там на сервере. Все так же как и с открытием страницы в браузере.

Дмитрий 28 марта 2018, 14:43

А в чём смысл закачивать файл на сервак?

Администратор

А как еще его обработать функцией md5() или md5_file()?
Он не сохраняется, но закачать-то его надо чтобы обработать.
То же самое делает и предложенная Вами функция fopen()

Дмитрий 28 марта 2018, 12:17

Вот я сделал также для внешнего файла.
<?php
//
$file_path = MODX_BASE_PATH.$input;
if(file_exists($file_path)) { // Проверка файла на сервере
return $input."?v=".md5_file($file_path);
} else if (@fopen($input, "r")) { // Проверка доступа к внешней ссылке
return $input."?v=".md5_file($input);
} else {
return $input;
}

Администратор

Спасибо, добавил немного доработанный вариант реализации в статью.

Дмитрий 28 марта 2018, 11:47

Как сделать для внешнего файла?

Good 17 марта 2018, 22:30

очень интересно. но куда это нужно поместить? какой путь и в какой файл

Павел 17 марта 2018, 22:30

я так понял что на php5.3 и ниже, эта фича не работает?

[MODx] Подсказки по API

[MODx] minishop2 tips

[Code helper] Заготовки для работы

Преобразовать JSON в HTML

[MODX] Загрузка сниппета после загрузки страницы через AjaxSnippet

[MODX, MiniShop2] Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

[MODX, pdoCrumbs] Вывести список всех родителей в ТВ поле ресурса

[JS] Связать значения инпутов через jQuery (биндинг)

[MODX] Массово обновить ТВ, или другое поле через базу

[miniShop2] Разместить корзину внутри блока с оформлением заказа

[OpenCart 1.5.1] Массово изменить адреса картинок у товаров

Вывести список всех файлов на сервере (и размер файла)

[PHP] Фиксированная сортировка массива на основе хэша

Курсы валют с cbr.ru на PHP, с запасным вариантом и кэшированием

[MODX] pThumb - ресайз изображений. Примеры использования.

Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

Скрыть информацию о том, что сайт работает на MODX

[MODX] Сообщение о том, что сайт использует Cookie

Не работает подгрузка товаров ajax mfilter2 на мобильном

Постраничная навигация — набор параметров и CSS PdoPage

Разбить вывод pdoResources на несколько колонок (блоков)

[MODX] Добавить скрипт перед тегом body

[PHP] Узнать скорость выполнения кода. Простой таймер PHP

Вывести список всех емэйлов miniShop2

[MODX] Создать редирект через autoRedirector API

[MODX, MiniShop2] Отредактировать шаблон письма

[MODX] Кастомный чанк для AdminPanel

[MODX] Оформление и настройка easyComm. Комментарии и отзывы на сайте.

[MODX, MiniShop2] Обязательный чекбокс при оформлении заказа

[JS] Маска для ввода телефона +7(___)___-__-__

[MODX, MiniShop2] Добавить в письмо контактную информацию

[MODX, MiniShop2] Email сделать не обязательным полем

[MODX] Импорт и экспорт в MiniShop2. Реализация 1

[MODX, MiniShop2] Изменить формат номера заказа

Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

Общая сумма по каждому товару в корзине Minishop2

reCaptcha не через форму (без тега <form>)

Расширение свойств товаров minishop2

pdoPage и getImageList - Постраничная навигация MIGX

[MODX] Соответствие названия классов с названиями таблиц в MySQL

Вывести 404 ошибку по настройки TV MODX

Расширить таблицу site_content (объект modResource) за 5 минут

Передать файл с одного на другой сервер

Создать ресурс процессором $modx->runProcessor('resource/create', $props)

Как включить HTTPS (SSL) в MODX - Подробная инструкция

[MODX, MIGX] Простейшая авторизация

[MIGX] Простая и симпатичная галерея fancybox

[MODX] Узнать размер файла

Красивое адаптивное меню под pdoMenu

pdoResources Заготовки для работы

FontAwesome - часто используемые иконки для шаблонов MODX

[MODX, MIGX] Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

[MODX, MIGX] Вывести getImageList только если он не пустой

Bxslider отображение картинок после полной загрузки слайдера

[MODX] Вывести список всех опций MiniShop2

[MODX] Курсы валют с cbr.ru на PHP

[MODX, MIGX] Простой аудио-плеер HTML5

Как контролировать кэш CSS и скриптов

[OpenCart] Вывести на главную все категории с картинками

[PHP] Получить древовидный массив за один запрос к базе

Вырезать кавычки - фильтр MODx

Регулярное выражение

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGx

[MODx] Динамическое поле emailSubject в FormIt

[MODx] Установить шаблон по-умолчанию для новых, создаваемых ресурсов

[MODx,MiniShop2] Не приходит почта администратору

[MODx] Баннеры с использованием BannerY

[Opencart] Вернуть английский язык, если вы его удалили

Универсальная форма обратной связи — feedBackForm

[MODx, miniShop2] Генерация YML для выгрузки в маркет

Редиректы

[MODx] pdoPage pagination css

[MODx] Вывести время загрузки (формирования) страницы

[MODx] Создать источник файлов

[MODx, minishop] Фильтрация по TV параметрам в msProducts

Регулярные выражения notepad++ примеры

[MODx] Создать свою страницу в админке

[JS] Заготовочки

[MODx] Поиск на сайте с пакетом SimpleSearch

[MODx, XML] Ответ для сервиса moneta.ru

[MODx] Подключить MODx в стороннем PHP файле

[MODx] Создать пакет с пользовательской таблицей

[PHP] Простое логирование

[OpenCart] Вывести модуль напрямую через контроллер

[MODx, Gallery] Галерея. Вывести обложки альбомов и фотографии

[MODx, MIGX] Примеры использования

[MODx] Сайт на обслуживании (выключить сайт)

[Opencart, FilterPro] Не работает пагинация

[OpenCart] Заготовки для автоматического заполнения товарами магазина 1.5.5.1.2

[PHP] Разные фишки, заготовки

[PHP, JSON] Пример перевода с помощью Yandex Translate API

[MySQL] Примеры запросов

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

[MODx] Дата на русском

[MODx] Ускорить установку MODx revo до пары кликов

[Opencart] API tips

[MODx, Quip] Отсортировать ресурсы по количеству комментариев Quip MODx

[PHP] Загрузить файл для постобработки

[Opencart 2] Показывать в категориях

[MODx, Quip] Более рабочий вариант.

[MODx] Получить grandparent. Вывести родитель родителя

[MODx] Вывести все доступные плейсхолдеры.

[MODx] getResources заготовки

[MODx] Счетчик посещений и скачиваний для сортировки ресурсов

[MODx] Как разместить исходный код сниппета на сайте, в документации

Удалить HTML-теги span, и стили из тега br

Полезные ссылки

Все записи