WP WebApp - PWA Manager

Plugin completo de WordPress para convertir tu sitio en una Progressive Web App (PWA) instalable en Android, iOS y escritorio.

🚀 Características

✅ Panel de administración intuitivo con interfaz visual ✅ Generación automática de manifest.json dinámico ✅ Service Worker automático con caché offline ✅ Subida de iconos desde WordPress Media Library ✅ Botón de instalación flotante personalizable ✅ Compatible con iOS (Apple Touch Icons) ✅ Soporte para iconos maskable (Android adaptativo) ✅ Colores personalizables con color picker ✅ Herramientas de prueba integradas ✅ 100% genérico - funciona con cualquier sitio WordPress

📋 Requisitos

• WordPress 5.0 o superior
• PHP 7.0 o superior
• HTTPS (obligatorio para PWAs)
• Permisos de administrador

📦 Instalación

Método 1: Subir ZIP desde WordPress

1. Ve a Plugins → Añadir nuevo → Subir plugin
2. Selecciona el archivo wp-webapp.zip
3. Haz clic en "Instalar ahora"
4. Activa el plugin

Método 2: FTP Manual

1. Sube la carpeta wp-webapp a /wp-content/plugins/
2. En WordPress: Plugins → Activar "WP WebApp - PWA Manager"

⚙️ Configuración

1. Acceder al panel

Menú lateral → PWA Manager (icono 📱)

2. Configurar datos básicos (Pestaña General)

• Nombre de la aplicación: Nombre completo de tu web
• Nombre corto: Máximo 12 caracteres
• Descripción: Breve descripción
• Color del tema: Color de la barra de estado (Android)
• Color de fondo: Color de pantalla de carga
• Display: Standalone (recomendado)
• Orientación: Cualquiera, Portrait o Landscape

3. Subir iconos (Pestaña Iconos)

Obligatorios:

• ✅ Icono 192x192 píxeles (PNG)
• ✅ Icono 512x512 píxeles (PNG)

Opcionales (recomendados):

• Icono Maskable 192x192
• Icono Maskable 512x512
• Apple Touch Icon (iOS)

💡 Usa Maskable.app para crear iconos maskable correctos.

4. Configurar botón (Pestaña Botón de Instalación)

• Activar/desactivar botón flotante
• Personalizar texto
• Elegir posición (4 esquinas disponibles)

5. Guardar y probar (Pestaña Probar PWA)

• Botón "Probar" para verificar Manifest
• Botón "Probar" para verificar Service Worker
• Instrucciones para Android, iOS y Chrome DevTools

🧪 Verificar que funciona

Chrome DevTools (F12):

1. Application → Manifest - Ver configuración
2. Application → Service Workers - Debe estar "activated"
3. Lighthouse → PWA - Score recomendado > 80

En dispositivos:

Android (Chrome/Edge):

• Menú ⋮ → Instalar aplicación

iOS (Safari):

• Botón Compartir → Añadir a pantalla de inicio

📱 Cómo funciona

Archivos generados automáticamente:

1. /manifest.json - Configuración de la PWA
2. /sw.js - Service Worker para caché offline

Ambos se generan dinámicamente desde la configuración del panel.

Meta tags añadidos automáticamente:

El plugin añade en el <head>:

• Link al manifest
• Meta theme-color
• Meta tags para iOS
• Apple touch icon

Botón de instalación:

• Se muestra automáticamente cuando la PWA es instalable
• Se oculta si ya está instalada
• En iOS muestra instrucciones (Safari no soporta install prompt)

🎨 Personalización

Valores por defecto:

Al activar el plugin, se configuran automáticamente:

• Nombre: Tomado de tu sitio WordPress
• Descripción: Tomada de tu sitio WordPress
• Color del tema: Azul WordPress (#2271b1)
• Todo es editable desde el panel

Hooks disponibles:

// Personalizar manifest
add_filter('wp_webapp_manifest', function($manifest) {
    $manifest['categories'] = ['business', 'productivity'];
    return $manifest;
});

// Añadir URLs al caché
add_filter('wp_webapp_cache_urls', function($urls) {
    $urls[] = '/pagina-importante/';
    return $urls;
});

🛠️ Solución de problemas

El banner no aparece en Android

Causas:

• Tu sitio no es HTTPS ❌
• No has visitado 2 veces con 5 minutos de diferencia
• Ya rechazaste el banner previamente

Solución:

• Usa el botón de instalación flotante (siempre funciona)
• O instala manualmente: ⋮ → Instalar aplicación

Los archivos manifest.json o sw.js dan 404

Solución:

1. Ve a Ajustes → Enlaces permanentes
2. Haz clic en "Guardar cambios" (sin modificar nada)
3. Esto reconstruye las reglas de rewrite

El icono no se ve en iOS

Verifica:

• Has configurado el Apple Touch Icon
• El icono es PNG (no JPG)
• La URL es accesible

📂 Estructura del plugin

wp-webapp/
├── wp-webapp.php           # Archivo principal
├── README.md               # Esta documentación
├── includes/
│   └── functions.php       # Funciones auxiliares
├── admin/
│   └── settings-page.php   # Panel de administración
└── assets/
    ├── css/admin.css       # Estilos del panel
    └── js/admin.js         # JavaScript (tabs, uploader, etc.)

❓ FAQ

¿Funciona con cualquier tema?

Sí, es completamente independiente del tema.

¿Es compatible con otros plugins?

Sí, compatible con WooCommerce, Elementor, Gutenberg, etc.

¿Afecta al SEO?

No, al contrario. Google favorece las PWAs.

¿Necesito saber programar?

No, todo se configura visualmente desde el panel.

¿Tiene notificaciones push?

Esta versión 1.0 no incluye push notifications. Planificado para futuras versiones.

¿Funciona offline?

Sí, el Service Worker cachea recursos para uso offline básico.

🔧 Configuración avanzada

Añadir más URLs al caché:

Edita wp-webapp.php y busca la variable $urlsToCache en la función serve_service_worker().

Cambiar estrategia de caché:

Por defecto usa Network First, falling back to cache. Puedes modificar el Service Worker para usar otras estrategias (Cache First, Network Only, etc.).

📊 Compatibilidad

📝 Changelog

Version 1.0.0

• ✅ Lanzamiento inicial
• ✅ Panel de administración completo
• ✅ Generación dinámica de manifest y SW
• ✅ Botón de instalación personalizable
• ✅ Soporte iOS y Android
• ✅ Herramientas de prueba integradas

🤝 Contribuir

Este es un plugin open-source. Contribuciones son bienvenidas:

1. Fork el repositorio
2. Crea una rama para tu feature
3. Commit tus cambios
4. Push y crea un Pull Request

📄 Licencia

GPL v2 or later - https://www.gnu.org/licenses/gpl-2.0.html

🔗 Enlaces útiles

• Documentación oficial PWA
• Maskable Icon Editor
• PWA Builder
• Lighthouse

💬 Soporte

¿Problemas o preguntas?

1. Lee esta documentación completa
2. Revisa la pestaña "Probar PWA" del plugin
3. Verifica la consola del navegador (F12)
4. Crea un issue en GitHub

¡Convierte tu WordPress en una PWA en minutos! 🚀