planetazuzu
4ea658a0bd
- 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
165 lines
4.5 KiB
Markdown
165 lines
4.5 KiB
Markdown
# ✅ Resumen: Banner de Instalación PWA
|
|
|
|
**Fecha:** 2024-12-20
|
|
|
|
---
|
|
|
|
## ✅ IMPLEMENTACIÓN COMPLETADA
|
|
|
|
### 1. Hook `usePWAInstall`
|
|
- ✅ **Detección de `beforeinstallprompt`** - Captura el evento del navegador
|
|
- ✅ **Detección de instalación** - Detecta cuando la app ya está instalada
|
|
- ✅ **Estado de instalabilidad** - `isInstallable`, `isInstalled`, `showBanner`
|
|
- ✅ **Función `install()`** - Muestra el prompt de instalación
|
|
- ✅ **Dismissal tracking** - Guarda en localStorage cuando el usuario cierra el banner
|
|
- ✅ **Re-mostrar después de 7 días** - Si el usuario cerró el banner, se muestra de nuevo después de 7 días
|
|
|
|
### 2. Componente `InstallBanner`
|
|
- ✅ **Banner visual** - Diseño atractivo con gradiente
|
|
- ✅ **Botón "Instalar"** - Llama a la función `install()`
|
|
- ✅ **Botón cerrar** - Permite cerrar el banner
|
|
- ✅ **Posicionamiento** - Fixed bottom, no se solapa con otros elementos
|
|
- ✅ **Responsive** - Funciona en móvil y desktop
|
|
- ✅ **Animación** - Slide-in desde abajo
|
|
|
|
### 3. Integración
|
|
- ✅ **Añadido a App.tsx** - Integrado en la aplicación
|
|
- ✅ **Z-index correcto** - No se solapa con UpdateNotification
|
|
- ✅ **Build exitoso** - Sin errores
|
|
|
|
---
|
|
|
|
## 🎯 CÓMO FUNCIONA
|
|
|
|
### Flujo de Instalación
|
|
|
|
1. **Usuario abre la app** en navegador compatible (Chrome, Edge, etc.)
|
|
2. **Navegador detecta** que la app es instalable (manifest + SW + HTTPS)
|
|
3. **Evento `beforeinstallprompt`** se dispara
|
|
4. **Hook captura el evento** y guarda el prompt
|
|
5. **Banner aparece** después de 3 segundos (mejor UX)
|
|
6. **Usuario hace clic en "Instalar"**
|
|
7. **Se muestra el prompt nativo** del navegador
|
|
8. **Usuario acepta** → App se instala
|
|
9. **App se abre** en modo standalone
|
|
|
|
### Detección de Instalación
|
|
|
|
- **Modo standalone:** `window.matchMedia('(display-mode: standalone)')`
|
|
- **iOS:** `window.navigator.standalone === true`
|
|
- **Evento `appinstalled`:** Se dispara cuando se instala
|
|
|
|
---
|
|
|
|
## 📱 COMPATIBILIDAD
|
|
|
|
### Navegadores que Soportan `beforeinstallprompt`
|
|
- ✅ Chrome (Desktop y Android)
|
|
- ✅ Edge (Desktop y Android)
|
|
- ✅ Opera (Desktop y Android)
|
|
- ✅ Samsung Internet
|
|
- ❌ Safari (iOS) - Usa método manual (Compartir → Añadir a pantalla de inicio)
|
|
- ❌ Firefox - No soporta `beforeinstallprompt` (en desarrollo)
|
|
|
|
### Requisitos para que Aparezca el Banner
|
|
1. ✅ **Manifest.json** presente y válido
|
|
2. ✅ **Service Worker** registrado
|
|
3. ✅ **HTTPS** (o localhost para desarrollo)
|
|
4. ✅ **Iconos** configurados (192x192 y 512x512 recomendados)
|
|
5. ✅ **No estar ya instalada** - Si ya está instalada, no aparece
|
|
|
|
---
|
|
|
|
## 🧪 CÓMO PROBAR
|
|
|
|
### Test Local (Desarrollo)
|
|
```bash
|
|
# 1. Build
|
|
npm run build
|
|
|
|
# 2. Preview (simula HTTPS con localhost)
|
|
npm run preview
|
|
|
|
# 3. Abrir en Chrome/Edge
|
|
# http://localhost:4173
|
|
|
|
# 4. Verificar:
|
|
# - Banner aparece después de 3 segundos
|
|
# - Botón "Instalar" funciona
|
|
# - Prompt nativo aparece
|
|
```
|
|
|
|
### Test en Producción
|
|
1. Desplegar en servidor con HTTPS
|
|
2. Abrir en Chrome/Edge (móvil o desktop)
|
|
3. Verificar que el banner aparece
|
|
4. Hacer clic en "Instalar"
|
|
5. Verificar que se instala correctamente
|
|
|
|
### Test iOS (Safari)
|
|
1. Abrir en Safari iOS
|
|
2. El banner NO aparecerá (Safari no soporta `beforeinstallprompt`)
|
|
3. Usar método manual: Compartir → Añadir a pantalla de inicio
|
|
4. Verificar que funciona en modo standalone
|
|
|
|
---
|
|
|
|
## ⚙️ CONFIGURACIÓN
|
|
|
|
### Personalización del Delay
|
|
En `src/hooks/usePWAInstall.ts`:
|
|
```ts
|
|
setTimeout(() => {
|
|
setShowBanner(true);
|
|
}, 3000); // Cambiar a otro valor (en milisegundos)
|
|
```
|
|
|
|
### Personalización del Tiempo de Re-mostrar
|
|
En `src/hooks/usePWAInstall.ts`:
|
|
```ts
|
|
if (daysSinceDismissed >= 7) { // Cambiar a otro número de días
|
|
```
|
|
|
|
### Personalización del Banner
|
|
En `src/components/layout/InstallBanner.tsx`:
|
|
- Cambiar colores, texto, posición, etc.
|
|
|
|
---
|
|
|
|
## 📋 CHECKLIST PWA COMPLETA
|
|
|
|
### Requisitos Esenciales ✅
|
|
- [x] Manifest.json configurado
|
|
- [x] Service Worker registrado
|
|
- [x] HTTPS (en producción)
|
|
- [x] Meta tags PWA
|
|
- [x] Banner de instalación
|
|
- [x] Funciona offline
|
|
|
|
### Mejoras Opcionales
|
|
- [ ] Iconos PNG específicos (192x192, 512x512)
|
|
- [ ] Screenshots en manifest
|
|
- [ ] Notificaciones push
|
|
|
|
---
|
|
|
|
## ✅ ESTADO FINAL
|
|
|
|
**Banner de Instalación:** ✅ **IMPLEMENTADO Y FUNCIONAL**
|
|
|
|
- ✅ Hook `usePWAInstall` creado
|
|
- ✅ Componente `InstallBanner` creado
|
|
- ✅ Integrado en App.tsx
|
|
- ✅ Build exitoso
|
|
- ✅ Sin errores de linter
|
|
|
|
**La PWA ahora tiene:**
|
|
- ✅ Banner de instalación funcional
|
|
- ✅ Detección automática de instalabilidad
|
|
- ✅ Tracking de dismissal
|
|
- ✅ Re-mostrar después de 7 días
|
|
|
|
---
|
|
|
|
**Última actualización:** 2024-12-20
|