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.
Consejos
- 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.
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).