codigo0/docs/consolidado/VERIFICACION_PWA.md

✅ Verificación PWA y Actualizaciones

Fecha: 2025-12-23

---

✅ CONFIGURACIÓN ACTUAL

Service Worker (public/sw.js)

• ✅ Registrado en src/main.tsx
• ✅ Cache First para assets estáticos (offline-first)
• ✅ Network First para HTML (permite actualizaciones)
• ✅ Cache de imágenes automático (/assets/infografias/)
• ✅ Versión de cache: v1.0.1 (incrementar para forzar actualización)

Manifest (public/manifest.json)

• ✅ Configurado con nombre, descripción, colores
• ✅ Iconos definidos (favicon.svg, favicon.ico)
• ✅ Display: standalone
• ✅ Shortcuts para acceso rápido

Registro del SW (src/main.tsx)

• ✅ Registro automático al cargar la página
• ✅ Verificación de actualizaciones cada hora
• ✅ Verificación al recuperar foco (cuando vuelves a la app)
• ✅ Detección de nueva versión instalada

---

🔄 SISTEMA DE ACTUALIZACIONES

Cómo Funciona

1. Detección automática:

   • El navegador verifica si hay una nueva versión del sw.js
   • Si hay cambios, descarga la nueva versión
   • La nueva versión se instala en segundo plano

2. Notificación al usuario:

   • Cuando hay una nueva versión instalada, se muestra un banner
   • El usuario puede elegir actualizar ahora o más tarde
   • Al actualizar, se recarga la página automáticamente

3. Actualización del cache:

   • Al cambiar CACHE_VERSION en sw.js, se crea un nuevo cache
   • El cache antiguo se elimina automáticamente
   • Los nuevos recursos se descargan y cachean

---

🧪 CÓMO PROBAR

Test 1: Verificar Registro del SW

1. Abrir la app en el navegador
2. DevTools > Application > Service Workers
3. Verificar:
   • ✅ SW registrado y activo
   • ✅ Estado: "activated and is running"
   • ✅ Scope: / o /guia-tes-digital/

Test 2: Verificar Cache

1. DevTools > Application > Cache Storage
2. Verificar:
   • ✅ Cache emerges-tes-v1.0.1 existe
   • ✅ Contiene index.html, manifest.json
   • ✅ Contiene assets (JS, CSS)

Test 3: Test Offline

1. Cargar la app (para cachear recursos)
2. DevTools > Network > Throttling > "Offline"
3. Recargar la página
4. Verificar:
   • ✅ La app carga correctamente
   • ✅ Las imágenes cargan desde cache
   • ✅ La navegación funciona

Test 4: Test de Actualización

1. Cambiar CACHE_VERSION en sw.js (ej: v1.0.1 → v1.0.2)
2. Hacer build: npm run build
3. Servir: npm run preview o subir a servidor
4. Abrir la app en navegador
5. Verificar:
   • ✅ El SW detecta la nueva versión
   • ✅ Se muestra banner de actualización
   • ✅ Al actualizar, se recarga y usa nuevo cache

---

🔧 MEJORAS IMPLEMENTADAS

1. Hook useServiceWorker

• ✅ Detecta estado del SW
• ✅ Detecta actualizaciones disponibles
• ✅ Detecta estado offline/online
• ✅ Funciones para actualizar y recargar

2. Componente UpdateNotification

• ✅ Muestra banner cuando hay actualización
• ✅ Botón para actualizar ahora
• ✅ Toast notification opcional

3. Service Worker Mejorado

• ✅ updateViaCache: 'none' - Siempre verifica actualizaciones
• ✅ Verificación al recuperar foco
• ✅ Versión de cache para control de actualizaciones

---

📋 CHECKLIST DE VERIFICACIÓN

Instalación PWA

• La app se puede instalar en Android (Add to Home Screen)
• La app se puede instalar en iOS (Add to Home Screen)
• El icono aparece correctamente
• El nombre aparece correctamente

Funcionamiento Offline

• La app carga sin internet
• Las imágenes cargan desde cache
• Los archivos Markdown cargan desde cache
• La navegación funciona offline

Actualizaciones

• El SW detecta nuevas versiones
• Se muestra notificación de actualización
• La actualización funciona correctamente
• El cache se actualiza correctamente

---

🚨 PROBLEMAS CONOCIDOS Y SOLUCIONES

Problema 1: SW no se registra

Síntomas: No aparece en DevTools > Application > Service Workers

Soluciones:

1. Verificar que sw.js está en public/ y se copia a dist/
2. Verificar que la ruta de registro es correcta
3. Verificar que no hay errores en la consola
4. Limpiar cache del navegador y Service Workers antiguos

Problema 2: Actualizaciones no se detectan

Síntomas: Cambios en el código no se reflejan

Soluciones:

1. Incrementar CACHE_VERSION en sw.js
2. Hacer nuevo build: npm run build
3. Limpiar cache del navegador
4. Forzar actualización: DevTools > Application > Service Workers > "Update"

Problema 3: Cache no se actualiza

Síntomas: Versión antigua sigue apareciendo

Soluciones:

1. Cambiar CACHE_VERSION en sw.js
2. Verificar que el SW se actualiza (nuevo sw.js en servidor)
3. Limpiar cache manualmente: DevTools > Application > Clear storage

---

🎯 PRÓXIMAS MEJORAS (Opcional)

1. Actualización automática en segundo plano (sin notificar)
2. Indicador visual de estado offline en la UI
3. Sincronización de datos cuando vuelve la conexión
4. Notificaciones push (si se implementa backend)

---

Última actualización: 2025-12-23