Как я могу заставить браузер видеть изменения CSS и Javascript?

Question

Файлы CSS и Javascript меняются не очень часто, поэтому я хочу, чтобы они кэшировались веб-браузером. Но я также хочу, чтобы веб-браузер видел изменения, внесенные в эти файлы, не требуя, чтобы пользователь очищал кеш браузера. Также нужно решение, которое хорошо работает с системой контроля версий, такой как Subversion.

---

Некоторые решения, которые я видел, включают добавление номера версии в конец файла в виде строки запроса.

Можно использовать номер редакции SVN для ее автоматизации: ASP.NET Показать номер редакции SVN

Можете ли вы указать, как включить переменную Revision другого файла? То есть в файле HTML я могу включить номер редакции в URL к файлу CSS или Javascript.

В Subversion book говорится о Revision: «Это ключевое слово описывает последнюю известную ревизию, в которой этот файл был изменен в хранилище».

Firefox также позволяет нажимать CTRL + R для перезагрузки всего на определенной странице.

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

Answer 1

Я обнаружил, что если вы добавите последнюю измененную временную метку файла в конец URL-адреса, браузер запросит файлы при его изменении. Например в PHP:

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}

Answer 2

Некоторые решения, которые я видел, включают добавление номера версии в конец файла в виде строки запроса.

<script type="text/javascript" src="funkycode.js?v1">

Вы можете использовать номер редакции SVN для автоматизации этого для вас , включив слово LastChangedRevision в ваш html-файл после того, как v1 появляется выше. Вы также должны настроить свой репозиторий для этого.

Надеюсь, это еще больше прояснит мой ответ?

Firefox также позволяет нажимать CTRL + R для перезагрузки всего на определенной странице.

Answer 3

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

Answer 4

Мне также стало интересно, как это сделать, когда я нашла ответ Грома. Спасибо за код.

Я боролся с пониманием того, как код должен был использоваться. (Я не использую систему контроля версий.) В заключение, вы включаете метку времени (ts) при вызове таблицы стилей. Вы не планируете часто менять таблицу стилей:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>

Answer 5

Когда вы выпускаете новую версию своих библиотек CSS или JS, происходит следующее:

1. изменить имя файла, включив в него уникальную строку версии
2. изменить файлы HTML, которые ссылаются на библиотеку, чтобы указывать на версионный файл

(обычно это довольно простой вопрос для скрипта выпуска)

Теперь вы можете установить Expires для CSS / JS на годы в будущем. Всякий раз, когда вы изменяете содержимое, если ссылка HTML указывает на новый URI, браузеры больше не будут использовать старую кэшированную копию.

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