Как контролировать кэш 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;
  }
}