Як примусово оновити кеш у користувачів 🧹 | Практичні методи

Ви внесли правки в CSS, виправили критичний баг у JavaScript, завантажили файли на сервер і радісно повідомляєте клієнту: “Готово!“. А у відповідь чуєте: “Нічого не змінилося, все поїхало!” – Знайома ситуація? Ви кажете йому натиснути Ctrl+F5, і це допомагає. Але ви не можете зателефонувати кожному відвідувачу сайту і попросити натиснути заповітні клавіші.

Якщо ви правильно налаштували заголовки кешування (наприклад, max-age=31536000), браузер буде тримати старий файл “мертвою хваткою” цілий рік. У цій статті я покажу, як обійти цей механізм і змусити браузер завантажити нову версію файлу саме тоді, коли це потрібно вам.

Принцип Cache Busting: обманюємо браузер

Браузери ідентифікують файли в кеші за їхньою URL-адресою. Якщо адреса https://site.com/style.css не змінилася, браузер бере файл з кешу. Ідея “скидання кешу” (Cache Busting) полягає в тому, щоб змінити URL-адресу файлу при кожному його оновленні. Для браузера це буде абсолютно новий файл, який він зобов’язаний завантажити з сервера.

Метод 1: Версіонування через Query String (найпростіший)

Ви просто додаєте знак питання та номер версії в кінці підключення файлу:

<!-- Стара версія -->
<link rel="stylesheet" href="style.css?v=1.0">
<!-- Нова версія (після ваших правок) -->
<link rel="stylesheet" href="style.css?v=1.1">

Коли ви вносите зміни, ви просто змінюєте цифру в коді. Браузер бачить style.css?v=1.1 як нову адресу і ігнорує стару кешовану версію style.css?v=1.0.

Автоматизація в PHP (WordPress)

Змінювати цифри вручну — це незручно і можна забути. У PHP є чудова функція filemtime(), яка повертає час останньої зміни файлу. Ми можемо використовувати цей час як номер версії.

Чистий PHP:

<link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">

Тепер, як тільки ви перезапишете файл style.css на сервері, filemtime зміниться, URL зміниться, і всі користувачі автоматично завантажать нову версію.

У WordPress (правильний спосіб):

У файлі functions.php при підключенні стилів використовуйте 4-й параметр функції wp_enqueue_style для версії:

wp_enqueue_style(
    'my-main-style', 
    get_stylesheet_directory_uri() . '/style.css', 
    array(), 
    filemtime(get_stylesheet_directory() . '/style.css') // Автоматична версія
);

Метод 2: Зміна імені файлу (найнадійніший)

Деякі проксі-сервери та CDN можуть ігнорувати параметри після знаку питання (?v=...) і все одно віддавати старий файл. Тому найнадійніший спосіб — змінювати саме ім’я файлу:

• Було: style.css
• Стало: style.v123.css або style.a7b9c2.css

Цей метод зазвичай використовують системи збірки, такі як Webpack, Gulp або Vite. Вони автоматично генерують новий файл з хешем у назві при кожній компіляції.

Метод 3: “Ядерна кнопка” — заголовок Clear-Site-Data

Бувають ситуації, коли все пішло шкереберть, і вам потрібно гарантовано очистити все у користувача: кеш, куки, локальне сховище. Для цього існує спеціальний HTTP-заголовок Clear-Site-Data.

Ви можете додати його через .htaccess, Nginx або PHP. Але будьте обережні: це зітре ВСЕ, включно з авторизацією користувача.

Приклад у PHP (додати на одну сторінку):

<?php
// Очистити тільки кеш
header("Clear-Site-Data: \"cache\"");
// АБО очистити все (кеш, куки, storage) - обережно!
// header("Clear-Site-Data: \"*\"");
?>

Коли користувач завантажить сторінку з цим заголовком, його браузер слухняно видалить усі збережені дані для вашого домену.

Важливий нюанс: CDN (Cloudflare)

Не забувайте, що між вашим сервером і користувачем часто стоїть CDN (наприклад, Cloudflare). Навіть якщо ви змінили версію файлу, CDN може віддавати стару копію.

Тому алгоритм дій при “жорсткому” оновленні такий:

1. Оновити файл на сервері.
2. Змінити версію файлу (вручну або автоматично через filemtime).
3. Очистити кеш у CDN (кнопка “Purge Cache” в панелі Cloudflare).

Висновок: автоматизуйте це