Solución a problemas de cache de ficheros javascript.

Hola muy buenas,

Después de estar algún tiempo sin escribir en mi blog, hoy pienso plantear un problema que se presenta en el desarrollo de páginas web y que tantas soluciones existen. Yo particularmente, voy a presentar mi solución basado en ASP.Net.

En mas de una ocasión tenemos un proyecto web, en el que nos surge una incidencia con respecto a un fichero javascript de nuestra aplicación y por tanto debemos cambiar el código de dicho fichero javascript sin necesidad de alterar el contenido del resto de páginas web. Después de realizar pruebas y pruebas, decidimos que nuestro código se encuentra en una versión estable y decidimos pasar a producción los cambios realizados. Al poco rato, nos llama nuestro cliente diciendo que la página no funciona, por tanto volvemos a revisar nuestro código y resulta que el código si que está funcionando. Nos dirigimos a otra máquina para comprobar el error, y vemos que igualmente funciona. Entonces podemos preguntarnos ¿que le está ocurriendo al cliente? ¿tendrá algún software maligno que le impida ejecutar nuestros cambios? La respuesta es no.
El problema es que el navegador del cliente ha cacheado el fichero javascript que hemos modificado, y al publicar la nueva versión del proyecto en el servidor y su navegador, que ya tenía una copia local del antiguo fichero javascript, cree que este fichero no ha cambiado porque la página que usa este código tampoco ha cambiado.
Entonces, ¿como solucionamos el problema? podemos decirle al cliente que elimine la caché y vuelva a cargar la web, pero sin embargo, esto no es una solución del todo elegante, pues el cliente no tiene porque realizar esta operación cada vez que hagamos un cambio. Por otro lado, podemos tener la precaución de cambiar algo en la página que usa este fichero javascript para que los navegadores desechen de la caché el fichero javascript, pero sin embargo, es una tarea que es propensa a que se nos olvide, o mejor aún, puede existir miles de páginas que usan nuestro fichero javascript y es tedioso cambiar todas antes de publicar nuestra nueva versión.
¿Y que hacemos? Pues podemos utilizar este truco.

       
<script type="text/javascript"
src="mifichero.js?v=200308170900"></script>

Con este sencillo truco engañamos al navegador para que elimine de la cache el fichero. Podemos usar ese número como un número de versión que tendremos en una variable de cadena en cualquier punto del proyecto que podamos controlar y nos resulte sencillo cambiar, de tal forma que dicho cambio se propague por todas las páginas de nuestro proyecto.


Vamos a dar un paso más, para aquellos que se le olvide cambiar este número de versión, en ASP.Net podemos utilizar este pequeño trozo de código, que hará esta operación por nosotros. Cada vez que se compile una nueva versión de nuestro proyecto, se generará un nuevo ensamblado que contendrá una versión distinta a la anterior de forma automática. ¿Como consultamos esa versión? Pues con el siguiente trozo de código:

       
Assembly ase = Assembly.GetExecutingAssembly();

Label1.Text = ase.ManifestModule.ModuleVersionId.ToString();

Espero que esta entrada os sirva de ayuda. Hasta otra.