NO_CACHE_SETUP.md 2.6 KB

Configuración para Evitar Cache del Navegador

Este documento explica las implementaciones realizadas para evitar que las páginas de la carpeta public guarden cache en el navegador.

Cambios Realizados

1. Archivos HTML Modificados

Se agregaron meta tags de no-cache en las secciones <head> de todos los archivos HTML:

  • public/main/index.html
  • public/register/index.html
  • public/verify.html

Meta tags agregados:

<!-- Meta tags para evitar cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

2. Servidor FastAPI - Headers HTTP

a) Clase NoCacheStaticFiles

Se creó una clase personalizada NoCacheStaticFiles en routes/static.py que extiende StaticFiles y agrega automáticamente headers de no-cache a todos los archivos estáticos.

b) Funciones de Servicio HTML

Se modificaron las funciones que sirven archivos HTML para incluir headers de no-cache:

  • serve_app_html()
  • serve_register_html()
  • serve_image()

Headers agregados:

headers = {
    "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
    "Pragma": "no-cache",
    "Expires": "0"
}

3. Middleware Global

Se creó un middleware global NoCacheMiddleware que asegura que todas las rutas relacionadas con archivos públicos tengan headers de no-cache.

Rutas cubiertas:

  • / (página principal)
  • /register (página de registro)
  • /verify (página de verificación)
  • /express/ (archivos estáticos principales)
  • /register/ (archivos estáticos de registro)
  • /images/ (imágenes)

Efectos de los Cambios

  1. Cache del navegador: Los archivos HTML, CSS, JS e imágenes no se guardarán en cache
  2. Actualizaciones inmediatas: Los cambios en archivos se reflejarán inmediatamente sin necesidad de refrescar con Ctrl+F5
  3. Compatibilidad: Funciona con todos los navegadores modernos

Verificación

Para verificar que funciona correctamente:

  1. Abre las herramientas de desarrollador (F12)
  2. Ve a la pestaña "Network"
  3. Recarga la página
  4. Verifica que en los headers de respuesta aparezcan:
    • Cache-Control: no-cache, no-store, must-revalidate, max-age=0
    • Pragma: no-cache
    • Expires: 0

Nota Importante

Estos cambios evitarán completamente el cache, lo que puede resultar en:

  • ✅ Actualizaciones inmediatas
  • ❌ Mayor uso de ancho de banda
  • ❌ Tiempos de carga ligeramente mayores

Para producción, considera implementar cache selectivo solo en archivos que cambien frecuentemente.