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

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

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

Можно использовать номер версии SVN для автоматизации этого для вас: ASP.NET Display SVN Revision Number

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

В книге Subversion говорится о редакции: "Это ключевое слово описывает последнюю известную версию, в которой этот файл был изменен в репозитории".

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

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

Ответ 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";
}

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

При выпуске новой версии ваших CSS или JS-библиотек вызывается следующее:

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

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

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

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

Ответ 5

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

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

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