1. Datos Generales de la PWA
Se muestra en la pantalla de carga e instalación.
Se muestra debajo del ícono en el celular (máx. 12 letras).
2. Paleta de Colores
Barra de navegación del celular
Pantalla de inicio (splash screen)
3. Diseño del Icono PWA
Ajustes visuales
La máscara simula cómo se recorta el ícono en diferentes sistemas operativos (Android usa círculos, iOS usa squircles).
4. Descargar Íconos Finales
Vista Previa (Pantalla de Celular)
¿Qué se muestra en el celular?
- 1 El Nombre Corto aparece debajo del ícono instalado. No uses más de 12 letras para evitar recortes automáticos del sistema.
- 2 El Color de Fondo del Icono completa la zona segura externa cuando la imagen subida es transparente.
- 3 Las descargas de íconos te proporcionarán los archivos necesarios en formato PNG listos para tu carpeta de recursos.
Pega esto en la sección <head> de tu index.html
Vincula tu archivo de configuración y registra el service worker.
Cargando código HTML...¿Cómo instalo la PWA en mi propio servidor?
Una vez que tengas los archivos descargados:
1. Sube tu index.html, manifest.json, sw.js y los dos iconos descargados (icon-192.png y icon-512.png) a tu servidor.
2. **¡Importante!** Asegúrate de que todos los archivos estén en el directorio principal (o que coincidan las rutas relativas en tu HTML y Manifest).
3. Tu servidor web debe usar protocolo HTTPS para que los navegadores móviles te permitan instalar la app.