¿Cómo puedo hacer que el navegador vea los cambios de CSS y Javascript?

Question

Los archivos CSS y Javascript no cambian muy a menudo, por lo que quiero que el navegador web los guarde en caché. Pero también quiero que el navegador web vea los cambios realizados en estos archivos sin que el usuario tenga que borrar su caché del navegador. También quiero una solución que funcione bien con un sistema de control de versiones como Subversion.

---

Algunas soluciones que he visto implican la adición de un número de versión al final del archivo en forma de una cadena de consulta.

podría utilizar el número de revisión de SVN para automatizar esto para usted: ASP.NET Display SVN Revision Number

Se puede especificar cómo se incluye la variable Revision de otro archivo? Es en el archivo HTML que puedo incluir el número de revisión en la URL del archivo CSS o Javascript.

En el Subversion book dice acerca de la revisión: "Esta palabra clave describe la última revisión conocida en la que este archivo cambió en el repositorio".

Firefox también permite presionar CTRL +R para recargar todo en una página determinada.

Para aclarar Busco soluciones que no requieren que el usuario haga nada de su parte.

Answer 1

Descubrí que si agrega la última marca de tiempo modificada del archivo al final de la URL, el navegador solicitará los archivos cuando se modifique. Por ejemplo en 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

Algunas soluciones que he visto implican la adición de un número de versión al final del archivo en forma de una cadena de consulta.

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

podría utilizar el número de revisión SVN para automatizar este for you mediante la inclusión de la palabra LastChangedRevision en su archivo HTML después de V1, donde aparece más arriba. También debe configurar su repositorio para hacer esto.

Espero que esto aclare mi respuesta?

Firefox también permite presionar CTRL +R para recargar todo en una página determinada.

Answer 3

En mi opinión, es mejor hacer que el número de versión sea parte del archivo en sí, p. Ej. myscript.1.2.3.js. Puede configurar su servidor web para que guarde en caché este archivo para siempre, y simplemente agregue un nuevo archivo js cuando tenga una nueva versión.

Answer 4

Al soltar una nueva versión de su CSS o bibliotecas JS, causar que ocurra lo siguiente:

1. modificar el nombre del archivo para incluir una cadena de versión única
2. modificar los archivos HTML que hacen referencia a la biblioteca de punto en el fichero versionado

(esto suele ser una cuestión bastante simple para un script de lanzamiento)

Ahora puede establecer el Expira para que el CSS/JS sea años en el futuro. Cada vez que cambie el contenido, si el HTML de referencia apunta a un nuevo URI, los navegadores ya no usarán la vieja copia en caché.

Esto provoca el comportamiento de almacenamiento en caché que desea sin requerir nada del usuario.

Answer 5

También me preguntaba cómo hacer esto, cuando encontré la respuesta de grom. Gracias por el código.

Tuve problemas para entender cómo se suponía que se debía usar el código. (No uso un sistema de control de versiones). En resumen, incluye la marca de tiempo (ts) cuando llama a la hoja de estilo. Usted no está pensando en cambiar la hoja de estilo a menudo:

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