Hay una técnica realmente sencilla para evitar que el navegador cargue nuestros css y javascripts de la cache y forzar su descarga en el momento que hemos realizado una actualización. Es realmente efectiva y funciona en todos los navegadores y sistemas
Para solucionar este problema simplemente tenemos que añadir a las llamadas a los archivos estáticos un parámetro. Da igual el que sea ya que en realidad no va a ser interpretado pero hará que la url sea distinta y así el navegador no la recordará y descargará del servidor de nuevo el contenido. Por ejemplo podemos llamar a nuestro css así :
<link rel="stylesheet" type="text/css" href="/css/estilos.css?ver=1.0" />Como véis estamos llamando a nuestro archivo de css añadiendo un parametro de versión, en este caso la 1.0. En el momento que hagámos una actualización sobre los css y queramos forzar al navegador a cargar el nuevo archivo para evitar problemas podríamos cambiar el parametro a 1.1 o al valor que quisieramos siempre que fuese diferente.
De la misma manera podemos hacerlo con nuestros javascripts, para evitar que el navegador los cargue de la caché añadimos el parámetro que queramos :
<script type="text/javascript" src="/js.js?ver=1.0" />Incluso a veces puede pasarnos con una imagen, que queremos actualizar por otra con el mismo nombre. Para forzar al navegador a actualizarla en vez de cargarla de la caché le añadimos un parámetro en la llamada :
<img src="/img/mi_imagen.gif?ver=1.0" />Espero que os sea muy útil ésta técnica y que a partir de ahora desaparezcan los miedos a la caché del navegador y sus famosos desastres.
Excelente tip, muy útil y sencillo de implementar.
ResponderEliminarGracias!
Yo tengo ahora el mismo problema, borro el caché, recargo, borro toda carpeta del proyecto en tomcat vuelvo a desplegar la aplicacion, y nada, he pobado esto de la version al CSS, pero no funciona, mi pregunta es: unicamente hay que añadirlo en la balisa link o tambien dentro de las clases que lo llaman, por ejemplo mi aplicacion usa spring framework tambien. gracias por la respuesta
ResponderEliminarNo funciona con I.E. si con mozilla.
ResponderEliminarMuy bueno mil gracias
ResponderEliminares correcto, funciona, pero ese codigo originaria que se llene rapido la memoria cache del navegador de los usuarios, que ocurriria en ese caso alguien sabe?
ResponderEliminarHola, esto que comentas no funciona asi. La cache la gestiona cada navegador, y va haciendo limpieza de la misma constantemente. Esta tecnica solo haria que si alguien ya ha estado previamente en la web obligue a descargar de nuevo ciertos ficheros para evitar su carga previa de la cache. Pero como digo es cada navegador el que se encarga de paginar la cache para evitar saturaciones u otros problemas que nada tienen que ver con como esté hecha una pagina web. Un saludo.
Eliminaradministrador, gracias por tu pronta respuesta, yo se que es el navegador el que gestiona el manejo del cache, pero yo solo queria asegurarme de que usando este truco que ustedes recomiendan no tengan problemas mis usuarios al acceder a mi website,dado que cada usuario puede usar uno u otro navegador. Lo que quiero decir, es si ustedes estan seguros que este truco no saturara en algun momento la cache de los navegadores (IE,FF,Opera,Chrome,etc)? estan seguros que los navegadores (todos, o la mayoria) evitan la saturacion de su memoria cache?
EliminarHola, puedes usarlo sin problema. No se va a saturar la memoria cache por el uso de esta técnica. Un saludo!
Eliminaradministrador, muchas gracias, no imaginan lo mucho que e buscado en la web, agradezco la publicación que has realizado, un tip sencillo, pero increíblemente útil.
ResponderEliminary si no me actualiza el HTML que hacemos??
ResponderEliminarSi no te actualiza el HTML quizá es que donde está alojada la web se usa un sistema de cacheado. En ese caso ya no hablamos de la cache que maneja el navegador,si no la que maneja el servidor y que hace que la pagina que sirve sea precisamente una version cacheada.
EliminarExcelente, gracias
ResponderEliminarMuy útil. Me ha servido para resolver un problema que tenía con Dolibarr en el módulo CKEditor, que no me cargaba en algunos navegadores (en ordenadores distintos) el módulo de javascript correcto. Estaría cacheado en algún sitio que por más que limpiaba la caché no conseguía que cogiera la nueva versión, y haciendo el cambio que explicas me ha funcionado a la primera. Muchas gracias y un saludo.
ResponderEliminarUna consulta. Que pasaría con las "background-image" del CSS? Estas seguirían obteniendose del cache cierto? Como se podria solucionar esto. Gracias.
ResponderEliminarhola, en el nuevo css deberias cambiar el nombre. Si la imagen tiene el mismo nombre, quizá podrias probar a ponerle también un parametro en la url de la imagen, deberia funcionar igual. Un saludo.
Eliminarwwooooooo!!! mucho tiempo buscando algo así, sos el mejor!!
ResponderEliminarExcelente aportación, además de que es muy sencillo, gracias porque no había encontrado la solución
ResponderEliminarConocen alguna forma de hacerlo para un sitio en Wordpress???
ResponderEliminarHola, el tip es para hacerlo en codigo fuente asi que si en el worpress que uses lo aplicas al codigo conseguirás el mismo resultado. Si no tienes acceso al codigo o si quieres conseguir el mismo resultado con algun plugin entonces ya tendrás que investigar por los foros de wordpress. Un saludo.
Eliminar