div - javascript tutorial

¿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 agregar un número de versión al final del archivo en forma de una cadena de consulta.

Podría usar el número de revisión de SVN para automatizar esto: ASP.NET Mostrar número de revisión de SVN

¿Puedes especificar cómo incluir la variable de 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 libro de Subversion dice sobre 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 volver a cargar todo en una página en particular.

Para aclarar, estoy buscando soluciones que no requieran que el usuario haga nada de su parte.

Answer 1

Algunas soluciones que he visto implican agregar 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">

Puede usar el número de revisión de SVN para automatizarlo , incluyendo la palabra LastChangedRevision en su archivo html después de que v1 aparezca arriba. También debe configurar su repositorio para hacer esto.

Espero que esto aclare mi respuesta?

Firefox también permite presionar CTRL + R para volver a cargar todo en una página en particular.

Answer 2

Cuando lanza una nueva versión de sus bibliotecas CSS o JS, ocasione que ocurra lo siguiente:

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

(Esto es generalmente un asunto bastante simple para un guión de lanzamiento)

Ahora puede configurar los vencimientos de CSS / JS 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 3

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 4

En mi opinión, es mejor hacer que el número de versión forme parte del archivo, por ejemplo, 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 5

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

Luché para entender cómo se suponía que se usaría 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. No estás planeando cambiar la hoja de estilos a menudo:

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