3 min read · 673 words
Si alguna vez has desplegado una web app y te has topado con que ciertos dispositivos móviles siguen cargando archivos JavaScript antiguos por culpa de la caché, este post es para ti. Te cuento cómo fulminar de una vez por todas ese comportamiento tan agresivo de Chrome en móviles directamente desde el motor de plantillas, sin depender de que el usuario tenga que refrescar manualmente.
El problema: La persistencia de la caché en Chrome móvil
Acababa de desplegar unos cambios en el módulo que administro y quería comprobar si la nueva interfaz se veía bien en el Chrome del móvil del jefe. Esta actualización incluía la tarjeta self-evolution 22 watcher y la vista 4-axis grouping, pero en la pantalla del jefe solo aparecía el diseño antiguo. Como bien sabemos, en este mundo capitalista el código no puede competir contra el dinero (es decir, las exigencias del jefe), así que me puse manos a la obra para salir de este infierno de caché de inmediato.
Síntomas del error
El jefe insistía en que, por más que recargaba la página, todo seguía igual. Sin embargo, cuando lancé un fetch directo desde mi entorno de Claude para comprobar el HTML que escupía el servidor, el nuevo marcado venía perfectamente. El diagnóstico estaba claro: el Chrome móvil de su teléfono tenía grabado a fuego en memoria el archivo auto_indexer.js?v=20260508 y se negaba en rotundo a descargar la nueva versión.
Entorno de trabajo
- Herramientas de depuración: Chrome 9222 CDP (Chrome DevTools Protocol)
- Framework backend: FastAPI (con Jinja2 para servir archivos estáticos)
- Navegador afectado: Chrome móvil (Android/iOS)
Intentos fallidos
Le pedí al jefe que intentara hacer un "hard refresh" (recarga forzada) en su Chrome móvil, pero solo se actualizaron algunos recursos secundarios; el JS principal seguía tirando de la caché vieja. En móviles no tenemos el comodín del Ctrl+F5 del escritorio, y pedirle a un usuario (y menos al jefe) que navegue por los ajustes del navegador para borrar la caché manualmente es la peor experiencia de usuario posible.
La solución definitiva
Al final, decidí no depender de la acción del usuario e implementé una estrategia de Cache-Busting forzando el cambio de la query string de los archivos estáticos desde el servidor. Modifiqué la plantilla templates/index.html para que la versión del script (que antes era algo estático como ?v=20260508-sess47-...) se incremente automáticamente en cada despliegue usando un hash único o ID de sesión, quedando algo como ?v=20260523-sess141-cycle42-autorefresh. Al cambiar este parámetro, el navegador interpreta que es una URL completamente nueva, ignora la caché y descarga el JS actualizado directamente del servidor.
Código implementado
<!-- templates/index.html - Forzamos la actualización del parámetro de consulta en el despliegue para invalidar la caché -->
<script src='/static/js/writer.js?v=20260523-sess142-category-doctrine'></script>Resultado y verificación
Tras desplegar la plantilla corregida, utilicé la herramienta Chrome MCP find para monitorizar el estado de renderizado en la sesión del navegador del jefe. ¿El resultado? Confirmación visual de 6/6: el nuevo marcado con el 4-axis section header y la boss decisions card se cargaron a la perfección.
Estado actual
Solucionado (fixed)
Un consejo para los que se topen con esto
La caché de Chrome en dispositivos móviles es increíblemente persistente. No confíes en que el usuario va a recargar la página por arte de magia; asegúrate de automatizar el incremento (bump) de las query strings de tus estáticos en tu pipeline de despliegue o en el motor de plantillas. Si tienes una presentación con directivos o con el jefe a la vuelta de la esquina, esto no es una opción, es una obligación.
Category Coverage Notice
This article follows our label-specific editorial criteria. Details: