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

3.4 KiB

Raw Blame History

🔧 Solución: Banner de Instalación No Se Ve

Fecha: 2024-12-20

🐛 PROBLEMA

El banner de instalación PWA no aparece.

✅ SOLUCIONES IMPLEMENTADAS

1. Modo Desarrollo (Testing)

En desarrollo (npm run dev), el banner se mostrará automáticamente después de 5 segundos incluso si el evento beforeinstallprompt no se dispara.

Esto permite:

Ver cómo se ve el banner
Probar la UI
Verificar que el componente funciona

Para probar:

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

2. Logs de Debug

Se añadieron logs en consola para debugging:

[PWA Install] Hook initialized
[PWA Install] Setting up install prompt listeners
[PWA Install] Development mode: Will show banner after 5 seconds for testing
[PWA Install] Development: Showing banner for testing
[InstallBanner] Render - State: { isInstallable: true, showBanner: true }
[InstallBanner] ✅ Rendering banner!

Abre DevTools (F12) > Console para ver estos mensajes.

🔍 VERIFICACIONES

1. Abrir Consola del Navegador

Abre DevTools (F12) > Console y busca:

[PWA Install] Hook initialized

Si NO ves este mensaje:

El hook no se está ejecutando
Verificar que InstallBanner está en App.tsx

2. Verificar Estado

En la consola deberías ver:

[InstallBanner] Render - State: { isInstallable: false, showBanner: false }

Después de 5 segundos en desarrollo:

[PWA Install] Development: Showing banner for testing
[InstallBanner] Render - State: { isInstallable: true, showBanner: true }
[InstallBanner] ✅ Rendering banner!

3. Verificar que el Componente se Renderiza

Abre React DevTools:

Buscar componente InstallBanner
Verificar que existe en el árbol
Verificar props: isInstallable, showBanner

🚨 SI SIGUE SIN APARECER

Solución Temporal: Forzar Mostrar

Añade esto temporalmente en InstallBanner.tsx:

const InstallBanner = () => {
  const { isInstallable, showBanner, install, dismissBanner } = usePWAInstall();

  // TEMPORAL: Forzar mostrar para testing
  if (import.meta.env.DEV) {
    return (
      <div className="fixed bottom-20 left-0 right-0 z-50 bg-red-500 p-4">
        <p className="text-white">BANNER DE PRUEBA - Debería verse</p>
        <p className="text-white text-sm">isInstallable: {String(isInstallable)}</p>
        <p className="text-white text-sm">showBanner: {String(showBanner)}</p>
      </div>
    );
  }

  // ... resto del código
};

Si este banner de prueba SÍ se ve, entonces el problema es la lógica del hook. Si NO se ve, entonces el problema es que el componente no se está renderizando.

📋 CHECKLIST RÁPIDO

Abrir consola del navegador (F12)
Ver mensajes [PWA Install]
En desarrollo, esperar 5 segundos
Ver mensaje [InstallBanner] ✅ Rendering banner!
Verificar React DevTools que InstallBanner existe
Verificar que no está en modo standalone (ya instalada)
Verificar localStorage: localStorage.getItem('pwa-install-dismissed')

🧪 TEST RÁPIDO

# 1. Limpiar localStorage
# En consola del navegador:
localStorage.removeItem('pwa-install-dismissed')

# 2. Recargar página
# F5 o Ctrl+R

# 3. Esperar 5 segundos

# 4. Verificar consola
# Deberías ver: [InstallBanner] ✅ Rendering banner!

Última actualización: 2024-12-20

3.4 KiB Raw Blame History