Validador de Web App Manifest (manifest.json)
Pega tu manifest.json para comprobar si cumple los requisitos de instalabilidad de una PWA. Verifica campos obligatorios como name, start_url, display e icons, y señala la ausencia de iconos maskable en una lista clara.
Comprobar si un manifest.json cumple las condiciones de una PWA
Un Web App Manifest es el archivo JSON que decide el icono, el nombre y el aspecto al arrancar cuando un sitio se añade a una pantalla de inicio. Pegue su contenido y esta herramienta comprueba las entradas exigidas, como `name`, `start_url`, `display` e `icons`, junto con la presencia de un icono maskable, y enumera lo que falte.
**Lo que merece cuidado aquí es que un manifest completo no basta por sí solo para que un sitio sea instalable.** Entre las condiciones bajo las cuales un navegador ofrece la instalación figuran **servirse por HTTPS y tener registrado un service worker**, y ninguna de las dos puede juzgarse a partir del contenido del manifest. Lo que esta herramienta examina es solo la parte de esas condiciones de la que el manifest responde. **El otro punto es el icono maskable: sin él, Android encoge el icono dentro de un círculo blanco.** Aportar una imagen aparte con `purpose` fijado en `maskable` permite al sistema dibujarla hasta el borde de la forma que use el dispositivo.
Cómo se usa
- Pegue el contenido de manifest.json Introduzca el JSON entero tal como está.
- Pruebe antes con los ejemplos Se ofrecen un ejemplo completo y otro mínimo.
- Lea lo que falta **Se informa tanto de las entradas exigidas que estén ausentes como de la presencia o ausencia de un icono maskable.**
- Compruebe aparte HTTPS y el service worker **Estos dos quedan fuera del manifest.** No juzgue solo por el resultado de esta herramienta.
Consejos para aprovecharla mejor
- Lo ideal es definir tanto name como short_name. Sin short_name, la etiqueta que aparece bajo el icono de la pantalla de inicio se trunca de forma mecánica a partir de name, lo que puede dar un resultado poco natural.
- Si no hay ningún icono marcado con purpose: "maskable", algunos dispositivos Android pueden recortar el icono de forma poco natural o dejar ver el color de fondo a través de él. Basta con añadir una entrada maskable al array icons existente para solucionarlo.
- Incluye en icons al menos un icono de 192x192 o mayor y, si es posible, otro de 512x512 o mayor. El primero se usa para el icono de la pantalla de inicio y el segundo para la pantalla de splash.
- Los criterios de instalabilidad de PWA que aplican navegadores como Chrome pueden cambiar con el tiempo, así que trata el resultado de esta herramienta como una orientación y no como una garantía; conviene verificarlo también con el panel Application de Chrome DevTools.
- Un start_url relativo (por ejemplo, "/?source=pwa") funciona sin problemas. Añadir un parámetro de consulta permite distinguir en tus analíticas los inicios desde la PWA de las visitas normales al navegador.
Cuándo resulta útil
Empezar a trabajar en una PWA
En la fase en que no está claro qué escribir, puede establecer qué entradas hacen falta.
Aislar por qué un sitio no se instala
**Puede determinar, ante todo, si la culpa está en el manifest.**
Mejorar el aspecto del icono
Añadir un icono maskable cambia cómo se ve el sitio en una pantalla de inicio de Android.
Inspeccionar una configuración existente
Puede confirmar si un manifest escrito hace tiempo sigue cumpliendo las condiciones de hoy.
Términos del Web App Manifest
- Name y short_name
- El nombre de la aplicación. **`short_name` aparece bajo el icono de la pantalla de inicio, así que manténgalo corto para que quepa.**
- Start_url
- La URL que se abre cuando la aplicación arranca desde la pantalla de inicio. No tiene por qué ser la portada.
- Display
- Cómo se presenta la aplicación al arrancar. Poner `standalone` quita la barra de direcciones y le da aspecto de aplicación.
- Icons
- La lista de iconos. **Aportar tanto 192 por 192 como 512 por 512 es el requisito básico.**
- Maskable
- **Una imagen preparada bajo el supuesto de que se recortará a la forma de icono que use el dispositivo.** Se declara mediante `purpose`.
- Theme_color
- El color empleado en la barra de estado y similares al arrancar. Ajustarlo a la paleta del sitio da sensación de conjunto.
Preguntas frecuentes
Curiosidad — La relación entre el Web App Manifest y las PWA
El Web App Manifest es una especificación en formato JSON del W3C que declara la información necesaria para añadir un sitio web a la pantalla de inicio e instalarlo como si fuera una app nativa: el nombre de la app, los iconos, el modo de visualización al iniciarse, el color del tema, entre otros. El propio término PWA (Progressive Web App) fue acuñado por ingenieros de Google en 2015, y manifest.json, junto con el Service Worker que gestiona el comportamiento sin conexión, es una de las dos piezas técnicas centrales que lo sustentan.
Si manifest.json no está configurado correctamente, el navegador no reconocerá el sitio como instalable y no mostrará ningún aviso de instalación (como el banner "Instalar" de Chrome). Problemas como una resolución insuficiente de icons o un valor mal escrito en display son fáciles de pasar por alto porque el JSON sigue siendo sintácticamente válido; a menudo no se detectan hasta que alguien intenta instalar la app.
Los iconos maskable (purpose: "maskable") son una incorporación relativamente reciente, introducida hacia 2019 para dar soporte a los "iconos adaptativos" de Android. Los iconos normales se enmascaran en un círculo, un cuadrado con esquinas redondeadas u otras formas según el dispositivo, por lo que un icono sin margen incorporado puede acabar con parte de su logotipo recortado. Un icono maskable debe diseñarse teniendo en cuenta una zona segura, y suele proporcionarse como una entrada separada de los icons normales.
Esta herramienta se centra únicamente en la validación estática de manifest.json; no comprueba otros factores que afectan a la instalabilidad real, como si hay un Service Worker registrado o si el sitio se sirve por HTTPS. Para la confirmación final en producción, es recomendable usar también las herramientas de desarrollador del navegador (por ejemplo, el panel Application de Chrome DevTools).