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

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


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

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

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

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

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

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

Ответов (5)

Решение

Я обнаружил, что если вы добавите последнюю измененную метку времени файла в конец 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";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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