Recargar CSS/Javascript en nuestra web

La caché es la memoria de nuestro navegador y tiene como función permitirnos navegar más rápidamente en webs que ya hemos visitado recientemente, no teniendo que descargar de la red ciertos elementos ya guardados en nuestra pc.

Para los desarrolladores  web el tema de caché es a veces molesto. Es un problema clásico realizar cualquier tipo de modificación en una de nuestras webs y seguir viendo la versión antigua cuando colgamos los cambios en el servidor.

OPCIÓN 1: Meta-tag “expires”.

<meta http-equiv="expires" content="fecha" >

Con esta opción indicamos al navegador hasta  cuando es válida aquella web, y si la hemos superado forzamos al navegador a recargar de caché.

Por ejemplo:

<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />

En este caso refrescaremos siempre la caché.

También podemos escribir simplemente un CERO para que la web expire inmediatamente.
O incluso, si el valor de content es -1, no se guardará en el caché (como un cero en esencia).


Pero ¿qué pasa si quiero mantener un expires en mi página? Por que la solución planteada parece asumir que la caché es un problema, cuando en realidad es una manera de navegar más rápidamente por la web.


OPCIÓN 2: Podemos usar versiones de elementos:

Por ejemplo, un iframe modificado pero que carga aún el anterior elemento:

<iframe height="100%" width="100%" scrolling="auto" name="iframe" id="iframe"
src="direccion.html?ver=1.0>
</iframe>

Con el ver=1.0, obligamos a que la web recargue el elemento que nos muestra antiguo.
Esto funciona con cualquier tipo de elemento antiguo que se resista a aparecer:

Imágenes:  <img src="/imgs/imagen.gif?ver=1.0" />

Hojas de css:  <link rel="stylesheet" type="text/css" href="estilo.css?ver=1.0" />

Javascripts: <script type="text/javascript" src="/js.js?ver=1.0" />


Como se puede apreciar en los ejemplos anteriores hemos añadido un parámetro a la URL donde está el recurso, pero el recurso sigue siendo el mismo, estilos.css. De esta forma, el navegador no tendrá constancia de esta nueva URL por lo que descargará el recurso.

Los parámetros de los ejemplos anteriores son pura convención. El primero es version=1.0 lo que nos ayudará a mantener un control sobre la versión de la css que estamos exponiendo. Tambien podria ser 201402241835 que no es más que la fecha en formato yyyyMMddHHmm en la que se hicieron los últimos cambios en el recurso. Por supuesto vale cualquier otro parámetro aunque es recomendable seguir siempre la misma convención.

En el momento en que volvamos a hacer cambios en el recurso bastará con cambiar este parámetro al importar el recurso desde la página (ej: version=1.1 ó 201405160937) y nos aseguraremos al 100% que el navegador del cliente descargará el recurso la primera vez que acceda a la página una vez subidos los cambios a producción.

Fuente:
blogs.elcorreo.com
www.adictosaltrabajo.com