Manifiesto de aplicación web (manifest.json)
Un manifiesto de aplicación web es un archivo JSON (normalmente manifest.json o site.webmanifest) enlazado desde el head de la página que le indica a los navegadores cómo debe comportarse tu sitio cuando se instala en una pantalla de inicio o un lanzador. Aporta el nombre de la app, el conjunto de iconos, los colores de tema y de fondo, y el modo de visualización. Sin uno, un navegador no ofrecerá instalar el sitio como PWA.
Qué declara el manifiesto
El manifiesto es un pequeño documento JSON enlazado con <link rel="manifest">. Cuando un usuario instala el sitio, el navegador lo lee para nombrar la app, elegir un icono, colorear la pantalla de bienvenida y decidir cuánto chrome del navegador mostrar.
Solo importa para la instalabilidad y el comportamiento en la pantalla de inicio. Una pestaña normal del navegador nunca lo necesita (las etiquetas link de favicon cubren eso), por lo que muchísimos sitios no tienen ningún manifiesto.
Un manifiesto mínimo
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111111",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Campos clave
| Campo | Propósito |
|---|---|
| name / short_name | Las etiquetas completa y de pantalla de inicio |
| icons | El conjunto de iconos de instalación y de pantalla de inicio |
| display | Cuánta interfaz del navegador muestra una app instalada |
| theme_color | Colorea la interfaz del SO alrededor de la app |
| background_color | El color de la pantalla de bienvenida al lanzar |
| start_url | La página que abre la app instalada |
Preguntas frecuentes sobre el manifiesto de aplicación web
¿Necesito un manifiesto de aplicación web?
Solo si quieres que el sitio sea instalable como PWA o controlar su apariencia en la pantalla de inicio. Un sitio web sencillo con solo un favicon no requiere uno.
¿Cuál es la diferencia entre manifest.json y site.webmanifest?
Nada más que el nombre del archivo. Ambos son el mismo manifiesto de aplicación web; el navegador usa el archivo al que apunte tu <link rel="manifest">.
¿Dónde enlazo el manifiesto?
En el head de la página, con <link rel="manifest" href="/site.webmanifest">. Un enlace en cada página que deba ser instalable.