Usa el Generador de Manifest PWA gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
¿Qué es un manifest de aplicación web?
Un manifest de aplicación web es un pequeño archivo JSON, normalmente llamado manifest.json, que dice al navegador cómo se llama tu aplicación web, cómo debe verse al instalarse y dónde empieza. Es el archivo que convierte un sitio web en una aplicación instalable, a menudo llamada aplicación web progresiva o PWA. Con un manifest, más un service worker y HTTPS, los navegadores ofrecen un botón de instalar, y la aplicación se abre en su propia ventana, con su propio icono, en lugar de dentro de una pestaña del navegador.
El manifest guarda el nombre de la aplicación, el nombre corto que se muestra en las pantallas de inicio, la URL de inicio, el modo de pantalla, los colores del tema y de fondo, una descripción y los iconos. Cada campo es pequeño por sí solo, pero juntos deciden si la instalación se siente cuidada o rota. Un icono que falta significa un marcador genérico. Una URL de inicio equivocada significa que la aplicación instalada abre la página equivocada. Un nombre corto demasiado largo se recorta en la pantalla de inicio. El generador de arriba construye el archivo y te avisa de estos problemas antes de publicar.
Cómo usar el generador
Completa primero el nombre de la aplicación y el nombre corto. El nombre es el título completo que se muestra en tiendas de aplicaciones y avisos de instalación. El nombre corto es la etiqueta bajo el icono de la pantalla de inicio, así que mantenlo en doce caracteres o menos, o el sistema lo recortará. Fija la URL de inicio en la página con la que debe abrir la aplicación, normalmente la ruta raíz. Elige un modo de pantalla: standalone es la opción habitual, abre sin la interfaz del navegador; fullscreen oculta incluso la barra de estado; minimal-ui mantiene algunos controles del navegador; browser simplemente abre una pestaña normal.
Elige colores de tema y de fondo que coincidan con tu diseño. El color del tema tiñe la barra de herramientas del navegador y el selector de tareas. El color de fondo rellena la pantalla mientras la aplicación carga, así que un desajuste aquí se muestra como un destello del color equivocado en cada arranque. Añade una descripción en una frase y escribe las URL de los iconos de 192 píxeles y 512 píxeles. Pulsa Generar, revisa las advertencias y descarga el archivo como manifest.json. Luego enlázalo desde tus páginas con una etiqueta link en el head que apunte al archivo, y sirve todo por HTTPS.
Iconos e instalabilidad
Los iconos son donde fallan la mayoría de los manifests. Los navegadores exigen archivos PNG reales en los tamaños que declaras, y los comprueban durante las pruebas de instalabilidad. Un icono de 192 píxeles y otro de 512 píxeles cubren el requisito estándar, y el icono de 512 píxeles también debería ser maskable, es decir, seguir viéndose bien cuando el sistema lo recorta en un círculo o un cuadrado redondeado. Diseña los iconos con un margen seguro alrededor del logo, para que el recorte nunca lo corte. Una forma rápida de probar es abrir el icono, imaginar un círculo dibujado dentro y comprobar que nada importante queda fuera de ese círculo.
El generador avisa cuando faltan iconos y cuando el nombre corto es demasiado largo, pero no puede comprobar que tus URL de iconos devuelvan realmente imágenes. Compruébalo tú mismo: abre cada URL de icono en un navegador y confirma que carga, y ejecuta una auditoría de instalabilidad en las herramientas de desarrollo de tu navegador, en los paneles Application o Lighthouse. Esas herramientas listan exactamente qué requisito falla, con palabras claras, y son el camino más rápido desde un manifest que parece correcto hasta uno que realmente se instala.
Más allá del manifest
Un manifest por sí solo no hace una PWA completa. También necesitas HTTPS, porque la instalación solo se ofrece en orígenes seguros, y un service worker, porque el soporte sin conexión y la carga fiable forman parte de la promesa. El service worker guarda en caché la estructura de la aplicación para que se abra incluso con mala conexión, y permite funciones como notificaciones push cuando el usuario las acepta. Nada de eso pertenece al manifest, pero todo depende de que el manifest sea correcto primero.
Empieza con el archivo generado, enlázalo, prueba la instalación en un teléfono real y luego añade el service worker. Revisa la aplicación instalada como lo haría un usuario: ¿el icono se ve bien, la pantalla de inicio coincide con tus colores, abre en la página correcta y funciona tras el primer arranque? Un manifest es un archivo pequeño con un efecto enorme en las primeras impresiones, y acertar con él es una de las mejoras de calidad más baratas que puede tener un proyecto web.