planetazuzu 4ea658a0bd feat: añadir galería de imágenes y referencias en capítulos del manual

- Crear página GaleriaImagenes con vista de todas las infografías organizadas por bloques
- Añadir referencias a imágenes en capítulo de Collarín Cervical (10 imágenes)
- Añadir botón de acceso a galería desde índice del manual
- Corregir error de React Router (useNavigate sin importar en MenuSheet)
- Ajustar estructura de providers en App.tsx
- Total: 48 imágenes disponibles en galería y referencias en manual

2025-12-20 21:36:49 +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