Как сообщить браузеру, что кэш изображения устарел?

Question

[romasovest]

Ситуация: Есть товар с артикулом XXX. При загрузке карточки товара подтягивается изображение XXX.jpg. При смене изображения я просто перезаписываю XXX.jpg

Вопрос: В кэше остается старая версия XXX.jpg. Как попросить браузер один раз обновить кэш XXX.jpg?

Догадки: Если после смены изображения я единожды добавлю в путь аргумент, например,
<img src="XXX.jpg?t=<?= time(); ?>">
то кэш XXX.jpg будет обновлен или у XXX.jpg и XXX.jpg?t=95683578 разный кэш?

Answer 1

[index0h]

у XXX.jpg и XXX.jpg?t=95683578 разный кэш

верно

Comments

[romasovest]

Спасибо! Тогда подскажите, если просто добавлять в аргумент время изменения файла это хорошее решение?

[Иван Шумов]

Если вы его не собираетесь брать из файловой системы то да

[romasovest]

Иван Шумов, объясните пожалуйста как это "из файловой системы"?
Я планирую использовать file_exists и filemtime (PHP)

[index0h]

Тогда подскажите, если просто добавлять в аргумент время изменения файла это хорошее решение?

Это самое простое и надежное решение. В принципе еще с заголовками можно поиграться: Cache-control, Expires, Pragma но то, как именно их настроить очень зависит от ваших задач.

[Иван Шумов]

romasovest, вот про это я и говорил. Это плохо. Обращение к файловой системе дополнительно это в принципе плохо. Это медленно, это дополнительно нагружает диск. На проекте в 10-20 человек вы это не заметите, но под нагрузкой просто ахтунг

[index0h]

Я планирую использовать file_exists и filemtime (PHP)

Зачем? nginx уже все за вас сделает, кэширование не забудьте настроить

[romasovest]

index0h, вот и я думал что все за меня сделают, читал что кеш должен обновляться если дата изменения свежая, но этого не происходит.

[romasovest]

index0h, можете подсказать как задать заголовки так, чтобы кеш изображения "устарел"?

[index0h]

romasovest

https://developer.mozilla.org/ru/docs/Web/HTTP/%D0...

[Ankhena]

Иван Шумов, какие альтернативные варианты получения даты-времени? Не считая ручек и сборщика.

[Иван Шумов]

Ankhena, база, кэш, а в идеале не обновлять изображения, а загружать новые

[Иван Шумов]

Ankhena, добавлю что очень хорошее решение этой проблемы есть у AWS S3 в режиме версионности и у AWS CloudFront с инвалидацией кэша

[romasovest]

Ankhena, возможно записывать дату изменения в базу, что конечно выглядит не менее костыльно.

[Ankhena]

romasovest, меня-то больше CSS волнует и картинки в теме сайта, а не при загрузке через cms.

[romasovest]

Ankhena, мне кажется для css можно и совсем убрать кэширование это вряд ли сильно замедлит загрузку или прописывать версию в базу и добавлять ее к ссылке. Хотя это конечно мои ненужные пять копеек, пордонте.

[romasovest]

Ankhena, ну и вот здесь qaru.site/questions/11793/how-to-force-browser-to-... вариант с filemtime набрал довольно много лайков, возможно это не такой уж и плохой вариант.

[Ankhena]

romasovest, вариант с базой мне совсем не нравится.
Сейчас использую filemtime.
Но смутило утверждение Иван Шумов что это плохо.
Мне не понятна сила нагрузки на сервер при запросе времени изменения файла. Насколько она больше чем просто обращение за этим файлом.
Все равно рядом есть еще запрос, а существует ли этот css в природе и если нет, то отдается другой, стандартный.

[Иван Шумов]

Ankhena, диск даже при сверхбыстрых SSD это куда медленнее чем получение этих данных из памяти. К тому же вы хотите сделать даже не 1, а 2 запроса - на проверку наличия файла и на получение мета-информации (как я понял). Нужно организовывать проект чтобы отдавать максимально статику. С минимальным числом дополнительных проверок и кэшированием.

[Ankhena]

Иван Шумов, я так и не увидела подходящей альтернативы

[Иван Шумов]

Ankhena, если вы говорите о стилях, JS и все такое то на это есть препроцессоры и генераторы asset'ов. Если о картинках, которые можно заливать и перезаливать - тот тут БД вам в помощь

[Ankhena]

Иван Шумов, ладно, третий круг я не вынесу. Спасибо.

Answer 2

[ThunderCat]

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

Comments

[romasovest]

ThunderCat, что за ключ - идентификатор владельца? Не смог нагуглить :(

[ThunderCat]

это идентификатор объекта которому принадлежит картинка, в вашем случае ид товара.