Luchando contra el caché de los navegadores

Publicado por parzibyte en

Eliminar caché en Chrome

Evitar que los navegadores web guarden en caché nuestros scripts y plantillas

Los navegadores web guardan en caché algunos archivos para que a la próxima llamada se carguen más rápido. Esto es una mejora para el usuario final, pero no tanto para los programadores.

Hay ocasiones (y te das cuenta 2 horas después de depurar como loco) en las que un script de JavaScript falla, arreglas el error pero misteriosamente sigue apareciendo, por más que refresques o guardes cambios.

Lo mismo pasa con las vistas o los archivos HTML, a veces cambias algo en la vista y no aparece al usar la aplicación web.

Todo esto es debido al caché de los navegadores web. Hoy veremos cómo obligar a los navegadores a que ya no guarden ese caché, y también otras medidas que podemos aplicar en caso de emergencia.

Cómo funciona el caché

Esto simplemente es una aproximación. Supongamos que tu sitio carga el archivo usuarios.js; la primera vez se carga normalmente y ya. En esta primera vez, el navegador guarda todo eso en el caché y memoriza que el archivo usuarios.js ya fue descargado.

La segunda vez, el navegador verá primero si recuerda el nombre del script antes de pedirlo, y como sí lo va a recordar entonces te va a dar la versión que tiene en caché; la cual responde mucho más rápido pero no es la versión fresca.

Ventajas del caché

Al usuario final le conviene, porque no gasta datos en caso de que esté en su teléfono; y además la página web carga en menos tiempo.

Como programador también te trae una ventaja, y es que el servidor no va a estar saturado por responder a todas las peticiones.

Solución para eliminar el caché sin interacción del usuario

Pero bueno, basta de charlas. Si llegaste aquí es para ver cómo podemos hacer que el navegador siempre cargue el archivo desde el servidor sin importar si lo tiene en caché o no. Es decir, forzar la carga de un archivo en el navegador.

Para hacerlo tenemos algunas opciones que veremos a continuación.

Poner un número distinto en cada petición

Como ya vimos que el navegador guarda el nombre de los archivos que ya cargó, ¿qué te parece si cambiamos el nombre en cada invocación?. Por ejemplo, en lugar de que sea usuarios.js, que sea usuarios.js?q=123

Eso no es inválido, ilegal o erróneo. El navegador verá el nombre y como no lo tendrá en su memoria, lo cargará como si fuera nuevo.

Ahora bien, ¿cómo generamos ese número o hash? muy fácil, con un preprocesador. En mi caso uso PHP, y para cargar los scripts hago esto:

Así podemos generar un número que cambiará al refrescar la página. Este ejemplo es con PHP pero funcionará para cualquier preprocesador, o bueno al menos ya puedes ver cómo es el truco.

De esta manera, cada que se refresque la página se invocarán nuevas versiones de nuestros scripts (aunque es el mismo archivo).

Eliminar caché de navegadores con JavaScript

Recientemente un compañero y yo buscábamos la forma de hacer que, al cargar una vista de HTML con JavaScript para imprimir, se ignorara el caché. Esto igualmente es muy fácil, porque con JavaScript también podemos generar un número “único”.

El código era más o menos así:

El problema era que el archivo de HTML era guardado en caché. Para eliminarlo simplemente hicimos lo mismo que hicimos con PHP pero ahora usando este lenguaje:

Esta función devuelve la fecha actual como milisegundos. Así cada vez que el usuario quisiera imprimir se iba a llamar al archivo con un nombre distinto.

Recomendado: operar fechas con JavaScript.

Otras maneras

Algunas herramientas o entornos son tan poderosos que juntan todo nuestro JavaScript y le ponen un nombre distinto cada que “compilamos” el código, por ejemplo así funciona cuando creamos un proyecto con la CLI de Vue y ejecutamos npm run build.

Eliminar caché de navegadores

Bueno esto tiene que ver con la configuración del navegador, busca la opción que elimine el caché. En Chrome se abre la pestaña con CTRL + SHIFT + SUPR

Recargar página web de manera forzada

Otra cosa para eliminar el caché únicamente para la página actual es abrir la consola del desarrollador y mantener presionado el botón para recargar. De esta forma saldrán más opciones, de las cuales nos importa la última.

Eliminar caché en Chrome

Eliminar caché en Chrome

Conclusión

Esas son algunas maneras que conozco para luchar contra el caché de los navegadores. He escuchado desde hace algunos años que hay una forma de escribir un manifiesto para indicar cuáles archivos cachear y cuáles no, pero nunca he investigado más sobre el tema.

Por cierto, esto también podría funcionar para archivos CSS y otro tipo de cosas que se incluyen.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: