Pregunta

Los archivos CSS y Javascript no cambian con mucha frecuencia, por lo que quiero que el navegador web los almacene en caché.Pero también quiero que el navegador web vea los cambios realizados en estos archivos sin necesidad de que el usuario borre la memoria 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 cadena de consulta.

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

¿Puedes especificar cómo incluyes el Revisión variable de otro archivo?Es decir, en el archivo HTML puedo incluir el número de revisión en la URL del archivo CSS o Javascript.

En el libro de subversión 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 CONTROL+R para recargar todo en una página en particular.

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

¿Fue útil?

Solución

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";
}

Otros consejos

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

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

Podrías usar el número de revisión SVN para automatizar esto. para ti incluyendo la palabra Última revisión modificada en su archivo html después de donde aparece v1 arriba.También debes configurar tu repositorio para hacer esto.

Espero que esto aclare aún más mi respuesta.

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

En mi opinión, es mejor hacer que el número de versión forme parte del archivo en sí, p. 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.

Cuando lanza una nueva versión de sus bibliotecas CSS o JS, ocurre 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 para que apunten al archivo versionado

(Esto suele ser un asunto bastante sencillo para un script de lanzamiento)

Ahora puede configurar la Caducidad para CSS/JS en años en el futuro.Siempre que cambie el contenido, si el HTML de referencia apunta a un nuevo URI, los navegadores ya no utilizarán la copia antigua en caché.

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

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

Me costó entender cómo se suponía que debía usarse 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 planeas cambiar la hoja de estilo con frecuencia:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top