Как заставить браузер перезагружать кэшированные файлы CSS / JS?

Question

Я заметил, что некоторые браузеры (в частности, Firefox и Opera) очень усердно используют кэшированные копии файлов .css и .js , даже между сеансами браузера. Это приводит к проблеме при обновлении одного из этих файлов, но браузер пользователя продолжает использовать кэшированную копию.

Вопрос заключается в следующем: каков самый элегантный способ заставить браузер пользователя перезагрузить файл после его изменения?

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

Обновление:

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

Я разместил новый ответ ниже, который представляет собой сочетание моего первоначального решения и предложения Джона.

Другая идея, предложенная SCdF , заключается в добавлении в файл фиктивной строки запроса. (Некоторый код Python для автоматического использования метки времени в качестве фиктивной строки запроса был передан pi .). Тем не менее, существует некоторое обсуждение относительно того, будет ли браузер кэшировать файл со строкой запроса. (Помните, мы хотим, чтобы браузер кэшировал файл и использовал его при будущих посещениях. Мы хотим, чтобы он снова извлекал файл только после его изменения.)

Поскольку неясно, что происходит с фиктивной строкой запроса, я не принимаю этот ответ.

Answer 1

Мой метод для этого - просто добавить элемент ссылки на стороне сервера:

<!--#include virtual="/includes/css-element.txt"-->

где содержимое css-element.txt равно

<link rel="stylesheet" href="mycss.css"/>

поэтому в день, когда вы хотите установить ссылку на my-new-css.css или что-то еще, вы просто меняете включение.

Answer 2

Самый простой способ - воспользоваться функциональностью чтения файлов PHP. Просто сделайте так, чтобы PHP выводил содержимое файла в теги.

<?php
//Replace the 'style.css' with the link to the stylesheet.
echo "<style type='text/css'>".file_get_contents('style.css')."</style>";
?>

Если вы используете что-то помимо PHP, существуют некоторые варианты в зависимости от языка, но почти на всех языках есть способ распечатать содержимое файла. Поместите его в нужное место (в разделе), и вам не нужно полагаться на браузер.

Answer 3

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

Answer 4

Изменение имени файла будет работать. Но обычно это не самое простое решение.

Как вы заметили, HTTP-заголовок управления кэшем «no-cache» не всегда работает. Спецификация HTTP 1.1 предоставляет возможность для пользовательских агентов решать, стоит ли запрашивать новую копию. (Это не интуитивно понятно, если вы просто посмотрите на имена директив. Прочитайте фактическую HTTP 1.1 спецификацию для кэша ... это немного больше смысла в контексте.)

В двух словах, если вы хотите железный контроль кеша, используйте

Cache-Control: no-cache, no-store, must-revalidate

в заголовках вашего ответа.

Answer 5

Один из лучших и быстрых подходов, которые я знаю, - это изменить имя папки, в которой вы есть CSS или JS файлы. ИЛИ для разработчиков. Измените имя ваших файлов CSS / js, например, на версии.

<link rel="stylesheet" href="cssfolder/somecssfile-ver-1.css"/>

Сделайте то же самое для ваших файлов js.

Answer 6

Ну, я заставил его работать по-своему, меняя версию js каждый раз при загрузке страницы, добавляя случайное число к версии файла js следующим образом:

// Add it to the top of the page
<?php
srand();
$random_number = rand();
?>

Затем примените случайное число к версии js следующим образом:

<script src="file.js?version=<?php echo $random_number;?>"></script>

Answer 7

Вы можете использовать SRI, чтобы сломать кеш браузера. Вам нужно только каждый раз обновлять ваш index.html новым хешем SRI. Когда браузер загружает HTML и обнаруживает, что хэш SRI на странице HTML не соответствует кэшированной версии ресурса, он перезагрузит ваш ресурс с ваших серверов. Это также имеет хороший побочный эффект - обход блокировки чтения из разных источников.

<script src="https://jessietessie.github.io/google-translate-token-generator/google_translate_token_generator.js" integrity="sha384-muTMBCWlaLhgTXLmflAEQVaaGwxYe1DYIf2fGdRkaAQeb4Usma/kqRWFWErr2BSi" crossorigin="anonymous"></script>

Answer 8

Другой способ, который я не видел упомянутым для js-файлов, - это использование jQuery $.getScript в сочетании с $.ajaxSetup option cache: false.

.

Вместо:

<script src="scripts/app.js"></script>

Вы можете использовать:

$.ajaxSetup({
  cache: false
});

$.getScript('scripts/app.js'); // GET scripts/app.js?_1391722802668