ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Принудительное обновление изображений в браузере: решение

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы обеспечить обновление кеша при каждом запросе, добавьте в URL изображений строку запроса, такую как временную метку, тем самым уникализируя каждый запрос.

HTML
Скопировать код
<!-- Для что нам кеш, если можно использовать временные метки? -->
<img src="image.jpg?nocache=<?= microtime(); ?>" alt="Изображение без кеша">

Помните, вы должны заменить <?= microtime(); ?> на функцию вашего серверного языка для генерации временных меток.

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

Модификация строки запроса

Принцип метода весьма прост: изменение URL обязует браузер рассматривать каждый запрос как новый и заново загружать ресурс. Включая текущее время в параметры запроса, вы обеспечиваете его уникальность. Это немного похоже на джедайский умственный маневр, помогающий обмануть браузер.

Контроль через заголовки

HTTP заголовки, в частности Cache-Control, позволяют тонко управлять кешированием. Это напоминает некую игру в "доброго полицейского, строгого полицейского".

http
Скопировать код
Cache-Control: no-cache

Директива no-cache обязывает браузер сверять содержимое с сервером перед использованием кешированного ресурса.

http
Скопировать код
Cache-Control: no-store

Директива no-store указывает браузеру не сохранять никакую информацию о запросе или ответе, будто вы говорите ему: "Вы имеете право оставаться без кеша!".

Вопрос упрямого кеширования

Иногда браузеры ведут себя как упрямые ослы и могут игнорировать указания по кешированию, если они им кажутся неподходящими. Чтобы гарантировать исполнение вашей стратегии, установите в дополнение к Cache-Control заголовок Expires, указывая прошедшую дату.

Пример:

http
Скопировать код
Expires: Wed, 21 Oct 2015 07:28:00 GMT

Визуализация

Ваш веб-браузер будет как на праздничном ужине, где подаются все время новые и привлекательные для него изображения!

Управление с помощью Cache-Control приводит к следующему:

Markdown
Скопировать код
🌐: ❓ "Что это такое? Снова новые изображения! Я не успеваю сохранять их!"

Este control infermoso será el responsable del deterioro de los artefactos:

Markdown
Скопировать код
Было: 🖼️🔄🌐 (повторяющийся цикл)
Стало: 🖼️➡️🗑️🌐 (постоянно обновляемые изображения!)

Усиление эффекта с помощью динамических названий изображений

Для усиления эффекта рассмотрите возможность переименовывать файлы изображений каждый раз при их обновлении. Это вынудит браузеры загружать последнюю версию каждый раз. Это похоже на изменение маскировки для запутывания преследователей.

Тестирование – это почти все!

Обязательно проверьте эти методы в различных окружениях. Приватные или общественные прокси могут иначе влиять на управление кешем, поэтому не забывайте учитывать их воздействие.

Полезные материалы

  1. HTTP кеширование – HTTP | MDN — детальное изучение принципов управления кешем.
  2. HTML Стандарт — подробности о мета-тегах для управления кешем.
  3. ETag – HTTP | MDN — использование ETags для детальной настройки кеша.
  4. Существует ли метатег для отключения кеша во всех браузерах? – Stack Overflow — профессиональное обсуждение методов отключения кеша.
  5. mod_expires – Apache HTTP Server Версия 2.4 — модуль mod_expires Apache для управления кешированием.
  6. HTTP/1.1: Определения полей заголовков — подробности о Pragma и других заголовках.
  7. Предотвращение ненужных сетевых запросов с HTTP кешем — оптимизация сетевых запросов с использованием кеша.