Принудительное обновление изображений в браузере: решение
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Чтобы обеспечить обновление кеша при каждом запросе, добавьте в URL изображений строку запроса, такую как временную метку, тем самым уникализируя каждый запрос.
<!-- Для что нам кеш, если можно использовать временные метки? -->
<img src="image.jpg?nocache=<?= microtime(); ?>" alt="Изображение без кеша">
Помните, вы должны заменить <?= microtime(); ?>
на функцию вашего серверного языка для генерации временных меток.
Модификация строки запроса
Принцип метода весьма прост: изменение URL обязует браузер рассматривать каждый запрос как новый и заново загружать ресурс. Включая текущее время в параметры запроса, вы обеспечиваете его уникальность. Это немного похоже на джедайский умственный маневр, помогающий обмануть браузер.
Контроль через заголовки
HTTP заголовки, в частности Cache-Control
, позволяют тонко управлять кешированием. Это напоминает некую игру в "доброго полицейского, строгого полицейского".
Cache-Control: no-cache
Директива no-cache
обязывает браузер сверять содержимое с сервером перед использованием кешированного ресурса.
Cache-Control: no-store
Директива no-store
указывает браузеру не сохранять никакую информацию о запросе или ответе, будто вы говорите ему: "Вы имеете право оставаться без кеша!".
Вопрос упрямого кеширования
Иногда браузеры ведут себя как упрямые ослы и могут игнорировать указания по кешированию, если они им кажутся неподходящими. Чтобы гарантировать исполнение вашей стратегии, установите в дополнение к Cache-Control
заголовок Expires
, указывая прошедшую дату.
Пример:
Expires: Wed, 21 Oct 2015 07:28:00 GMT
Визуализация
Ваш веб-браузер будет как на праздничном ужине, где подаются все время новые и привлекательные для него изображения!
Управление с помощью Cache-Control
приводит к следующему:
🌐: ❓ "Что это такое? Снова новые изображения! Я не успеваю сохранять их!"
Este control infermoso será el responsable del deterioro de los artefactos:
Было: 🖼️🔄🌐 (повторяющийся цикл)
Стало: 🖼️➡️🗑️🌐 (постоянно обновляемые изображения!)
Усиление эффекта с помощью динамических названий изображений
Для усиления эффекта рассмотрите возможность переименовывать файлы изображений каждый раз при их обновлении. Это вынудит браузеры загружать последнюю версию каждый раз. Это похоже на изменение маскировки для запутывания преследователей.
Тестирование – это почти все!
Обязательно проверьте эти методы в различных окружениях. Приватные или общественные прокси могут иначе влиять на управление кешем, поэтому не забывайте учитывать их воздействие.
Полезные материалы
- HTTP кеширование – HTTP | MDN — детальное изучение принципов управления кешем.
- HTML Стандарт — подробности о мета-тегах для управления кешем.
- ETag – HTTP | MDN — использование ETags для детальной настройки кеша.
- Существует ли метатег для отключения кеша во всех браузерах? – Stack Overflow — профессиональное обсуждение методов отключения кеша.
- mod_expires – Apache HTTP Server Версия 2.4 — модуль mod_expires Apache для управления кешированием.
- HTTP/1.1: Определения полей заголовков — подробности о Pragma и других заголовках.
- Предотвращение ненужных сетевых запросов с HTTP кешем — оптимизация сетевых запросов с использованием кеша.