Как у пользователя сбросить кэш браузера и принудительно загрузить ему новый css?

Question

[Дмитрий]

Допустим у меня на сайте немного изменился файл css, что-то в нем скорректировал.
Пользователь заходит на сайти видит что все поехало и криво - чтобы у него все отобразилось надо нажать F5

Вопрос, могу ли я сделать так, чтобы у пользователя автоматически чистился кэш браузера и файл css грузился заново? Или можно ли при обновлении сайта вывести пользователю окошко "Сайт обновлен. нажмите на кнопку чтобы изменения вступили в силу".

Заранее спасибо!

p.s. Видел что у вебверсии telegram есть что-то подобное, окошко периодически вылезает что версия обновлена, но не знаю что оно делает

Answer 1

[Эдуард]

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

Ссылки на файл стилей, а так же js выглядят как:
/path/to/file/file.js?VERSION
/path/to/file/file.css?VERSION

или настройте mod_rewrite так, что бы он понимал ссылки вида (предпочтительно):
/path/to/file/file.VERSION.js
/path/to/file/file.VERSION.css

Так же погуглите на тему grunt-version, webpack, сборка frontend

Answer 2

[Андрей]

добавить параметр подключенному css файлу, например время создания

<link rel="stylesheet" href="your_file.css?timestampcreate">

Comments

[Дмитрий Сергеевич]

timestampcreate создается при помощи js? php? .httacces?

[Stalker_RED]

Дмитрий Сергеевич: любым удобным вам способом. На счет .htaccess - сомневаюсь.

[Дмитрий Сергеевич]

я надеялся увидеть не криворукий скрипт =) Как-то задался этой же задачей, и пришел к выводу что самое лучшее решение это JS, но нормальный скрипт так и не получилось найти, находил только 20и колесные велосипеды. В .htaccess это выглядит примерно так:

#Far Future Expires Header

ExpiresActive On
ExpiresDefault "access plus 10 years"

#Rules for Versioned Static Files
RewriteRule ^(scripts|css)/(.+)\.(.+)\.(js|css)$ $1/$2.$4 [L]