planetazuzu 2f9fb6e499 chore: limpieza completa del proyecto

- 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

2025-12-23 10:16:35 +01:00

2.5 KiB

Raw Blame History

📱 Instrucciones: Ver el Banner de Instalación

Fecha: 2024-12-20

✅ CÓMO VER EL BANNER

Opción 1: Modo Desarrollo (Más Fácil)

En modo desarrollo, el banner se mostrará automáticamente después de 5 segundos:

npm run dev
# Abrir http://localhost:8096
# Esperar 5 segundos
# El banner debería aparecer en la parte inferior

Nota: Esto funciona incluso si el evento beforeinstallprompt no se dispara, para que puedas ver cómo se ve el banner.

Opción 2: Preview (Más Realista)

El preview simula mejor el entorno de producción:

npm run build
npm run preview
# Abrir http://localhost:4173
# Esperar 3-5 segundos
# El banner debería aparecer

Opción 3: Producción con HTTPS

En producción con HTTPS, el banner aparecerá cuando:

El navegador detecte que la app es instalable
El evento beforeinstallprompt se dispare
Después de 3 segundos

Requisitos:

✅ HTTPS activo
✅ Service Worker registrado
✅ Manifest.json válido
✅ Navegador compatible (Chrome/Edge)

🔍 VERIFICAR EN CONSOLA

Abre DevTools (F12) > Console y busca estos mensajes:

[PWA Install] Hook initialized
[PWA Install] Setting up install prompt listeners
[PWA Install] Development mode: Will show banner after 5 seconds for testing
[InstallBanner] Development: Forcing banner to show for testing
[InstallBanner] ✅ Rendering banner!

Si ves estos mensajes pero el banner no aparece:

Verificar z-index (puede estar detrás de otro elemento)
Verificar que no hay errores de CSS
Verificar React DevTools que el componente se renderiza

🚨 SI NO SE VE

Paso 1: Verificar Consola

Abrir DevTools (F12)
Ir a Console
Buscar mensajes [PWA Install] y [InstallBanner]

Paso 2: Verificar React DevTools

Instalar React DevTools (extensión del navegador)
Buscar componente InstallBanner
Verificar que existe y tiene las props correctas

Paso 3: Verificar CSS

Abrir DevTools > Elements
Buscar elemento con clase fixed bottom-20
Verificar que no está oculto (display: none)

Paso 4: Resetear localStorage

// En consola del navegador
localStorage.removeItem('pwa-install-dismissed')
// Recargar página (F5)

📋 CHECKLIST

Abrir http://localhost:8096 (o preview)
Abrir DevTools (F12) > Console
Esperar 5 segundos
Ver mensaje [InstallBanner] ✅ Rendering banner!
Ver banner en la parte inferior de la pantalla

Última actualización: 2024-12-20

2.5 KiB Raw Blame History