Eliminar caché en Chrome
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.
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.
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.
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.
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:
<?php $tiempo = time();?>
<script src="un_script.js?q=<?php echo $tiempo; ?>"></script>
<script src="js/directorio/otro_script.js?q=<?php echo $tiempo; ?>"></script>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).
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í:
var url = './plantillas/un_archivo.html';
var ventana = window.open(url, 'ejemplo', 'menubar=0,resizable=1');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:
var url = './plantillas/un_archivo.html?=' + Date.now().toString();
var ventana = window.open(url, 'ejemplo', 'menubar=0,resizable=1');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.
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.
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
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.
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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.
Ver comentarios
Hola estaba intentando que cada vez que subo un producto o hago una modificación en la pagina hecha con wordpress, borro cache de la web con 3W total cache incluso de mi propio servidor de hosting pero si el cliente ya se metió anteriormente a los cambios a a mi web cuando se vuelve a meter no salen los cambios hasta que no actualiza el cliente. Hay alguna manera para que todos los cambios que haga en la web salgan reflejados aunque sea al dia siguiente sin que el cliente tenga que actualizar pagina???? Gracias de antemano