planetazuzu
2f9fb6e499
- Fase 1: Eliminar archivos innecesarios (logs, builds, node_modules) - Fase 2: Mover backups y duplicados a revisión: - _BACKUP_MD/ (203 archivos) - MANUAL_TES_DIGITAL/ (110 archivos) - imagenes-pendientes/ (60 archivos) - Fase 3: Simplificar configuraciones (mover no usadas a config_backup/) - Fase 4: Consolidar documentación: - 13 documentos esenciales → docs/consolidado/ - 42 documentos → docs/archivo/ - README.md actualizado - Fase 5: Organizar scripts (mantener solo esenciales) - Fase 6: Reinstalación y verificación (npm install + build) - Corregir clave duplicada 'uso-tensiometro' en image-registry.ts - Total: 393 archivos movidos a revisión, 5 configuraciones archivadas, 55 documentos organizados - Build verificado y exitoso
178 lines
5.1 KiB
Markdown
178 lines
5.1 KiB
Markdown
# ✅ Verificación PWA y Actualizaciones
|
|
|
|
**Fecha:** 2024-12-19
|
|
|
|
---
|
|
|
|
## ✅ 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:** 2024-12-19
|