El manifiesto de las apps web es un archivo JSON simple que permite que tú, el desarrollador, puedas controlar cómo se muestra tu app al usuario en áreas donde normalmente ven apps nativas (por ejemplo, la pantalla de inicio de un dispositivo móvil), además de indicar lo que el usuario puede iniciar y definir su apariencia al iniciarse.
Los manifiestos de las apps web permiten guardar un marcador de sitio en la pantalla de inicio de un dispositivo. Cuando un sitio se inicia de esta manera:
- Tiene un ícono y un nombre únicos para que los usuarios puedan diferenciarlo de otros sitios.
- Muestra algo al usuario mientras se descargan los recursos o se restauran a partir del caché.
- Proporciona características predeterminadas de visualización al navegador para evitar una transición demasiado brusca cuando los recursos del sitio se encuentren disponibles.
Hace todo esto a través del simple mecanismo de metadatos en un archivo de texto. Eso representa el manifiesto de aplicación web.
TL;DR
- Crear un manifiesto y vincularlo a tu página son procesos muy sencillos.
- Controla lo que el usuario ve cuando se inicia desde la pantalla de inicio.
- Esto incluye elementos como una pantalla de presentación, colores del tema e incluso la URL que se abre.
Crea el manifiesto
Antes de adentrarnos en detalles sobre el manifiesto de la app web, creemos un manifiesto básico y vinculemos una página web al mismo.
Puedes dar al manifiesto el nombre que desees. La mayoría de la gente usa manifest.json
. A continuación, te mostramos un ejemplo:
{
"short_name": "AirHorner",
"name": "Kinlan's AirHorner of Infamy",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html?launcher=true"
}
Asegúrate de incluir lo siguiente:
- Un
short_name
para usar como el texto de la pantalla de inicio de los usuarios. - Un
name
para usar en el banner de instalación de apps web.
Informa al navegador acerca del manifiesto
Una vez que el manifiesto de tu app esté creado y se encuentre en tu sitio, agrega
una etiqueta link
a todas las páginas que compongan tu app web, como se muestra a continuación:
<link rel="manifest" href="/manifest.json">
Configura una URL de inicio
Si no proporcionas una start_url
, se usa la página actual, y
es muy poco probable que esto sea lo que los usuarios quieran. Pero esa no es la razón para
incluirla. Ya que ahora puedes definir la forma en la que se iniciará tu app, agrega un parámetro de cadena
de consulta a la start_url
para indicar cómo se inició.
"start_url": "/?utm_source=homescreen"
Puedes elegir lo que quieras; el valor que usamos tiene la ventaja de ser relevante para Google Analytics.
Personaliza los íconos

Puedes definir el conjunto de íconos que usará el navegador cuando un usuario agregue tu sitio a su pantalla de inicio. Puedes definirlos con un tipo y tamaño, de la siguiente manera:
"icons": [{
"src": "images/touch/icon-128x128.png",
"type": "image/png",
"sizes": "128x128"
}, {
"src": "images/touch/apple-touch-icon.png",
"type": "image/png",
"sizes": "152x152"
}, {
"src": "images/touch/ms-touch-icon-144x144-precomposed.png",
"type": "image/png",
"sizes": "144x144"
}, {
"src": "images/touch/chrome-touch-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
}],
Agrega una pantalla de presentación

Cuando inicias tu app web desde la pantalla de inicio suceden varias cosas bajo la superficie:
- Chrome se inicia.
- Se ejecuta el representador que muestra la página.
- Tu sitio se carga desde la red (o desde la caché si tiene un service worker).
Mientras esto sucede, la pantalla se pone en blanco y parece detenida. Esto se nota sobre todo si cargas tu página web desde la red, ya que así las páginas tardan más de uno o dos segundos en visualizarse en la página principal.
Para ofrecer una experiencia de usuario mejor, puedes reemplazar la pantalla blanca con un título, color e imágenes.
Configura una imagen y un título
Si sigues los pasos desde el principio, ya tienes una imagen y un título. Chrome infiere la imagen y el título a partir miembros específicos del manifiesto. Lo que importa aquí es conocer las características específicas.
Se toma una imagen a partir de la matriz de icons
para la pantalla de presentación. Chrome elige la imagen de densidad más cercana a 128 dp para el dispositivo. El título se obtiene simplemente a partir del miembro name
.
Configura un color de fondo
Especifica el color de fondo usando la propiedad con el nombre apropiado background_color
. Chrome usa este color desde el momento en que la app web se inicia,
y el color permanece en la pantalla hasta la primera aparición de la app web.
Para configurar el color de fondo, indica lo siguiente en tu manifiesto:
"background_color": "#2196F3",
Ahora no se muestra una pantalla blanca cuando se inicia tu sitio desde la pantalla de inicio.
Un buen valor que se sugiere para esta propiedad es el color de fondo de la página de carga. Usar los mismos colores que la página de carga permite una transición más suave desde la pantalla de presentación a la página principal.
Configura un color de tema
Especifica un color de tema por medio de la propiedad theme_color
. Esta propiedad
fija el color de la barra de herramientas. Para llevar esto a cabo sugerimos duplicar un color existente,
específicamente el theme-color
<meta>
.
Configura el estilo para iniciar

Usa el manifiesto de aplicación web para controlar el tipo de pantalla y la orientación de página.
Personaliza el tipo de pantalla
Puedes hacer que tu app web oculte la IU del navegador si configuras el tipo de display
en standalone
:
"display": "standalone"
Si consideras que los usuarios preferirían ver tu página como un sitio normal en un navegador, puedes configurar el tipo de display
en browser
:
"display": "browser"
Especifica la orientación inicial de la página

Puedes imponer una orientación específica, lo cual beneficia a las apps que solo funcionan en una orientación; por ejemplo, juegos Usa esto de manera selectiva. Los usuarios prefieren seleccionar la orientación.
"orientation": "landscape"
Proporciona un color de tema para todo el sitio

Chrome introdujo el concepto de un color de tema para tu sitio en 2014. El color de tema es una sugerencia de tu página web que indica al navegador el color con que deben matizarse los elementos de IU como la barra de direcciones.
Sin un manifiesto, debes definir el color de tema en cada páginas, y si tu sitio es grande o heredado, no será posible realizar muchos cambios en él.
Agrega un atributo theme_color
a tu manifiesto. Cuando se inicie el sitio
desde la pantalla de inicio, cada página del dominio recibirá el color de tema de modo automático.
"theme_color": "#2196F3"

Prueba tu manifiesto
Si quieres verificar de forma manual que el manifiesto de tu app web esté configurado correctamente, usa la pestaña Manifest en el panel Application de Chrome DevTools.
Esta pestaña proporciona una versión en lenguaje natural de muchas de las propiedades de tu manifiesto. Consulta Manifiesto de app web en la documentación de Chrome DevTools para obtener más información sobre esta pestaña. También puedes simular los eventos Add to Homescreen (agregar a la pantalla de inicio) desde aquí. Consulta Prueba del banner de instalación de apps para obtener más información sobre este tema.
Si prefieres un enfoque automático para validar el manifiesto de tu app web, visita Lighthouse. Lighthouse es una herramienta de auditoría de apps web que ejecutas como una extensión de Chrome o como un módulo NPM. Le proporcionas una URL a Lighthouse, este ejecuta un conjunto de auditorías en la página y luego muestra los resultados en un informe. Las auditorías de Lighthouse en relación con los manifiestos de apps web incluyen controlar lo siguiente:
- Que la app pueda agregarse a la pantalla de inicio.
- Que luego de agregarse, la app se inicie con una pantalla de presentación personalizada.
- Que la barra de direcciones del navegador tenga un color personalizado.
- Que la app esté en HTTPS (un requisito previo para Add to Homescreen).
Más información
Este artículo te ha brindado una introducción rápida a los manifiestos de apps web, pero hay más por aprender.
Si usas un manifiesto de apps web, probablemente será conveniente que también configures un banner de instalación de apps.
En Mozilla Developer Network puedes encontrar una guía completa sobre el manifiesto de apps web.
Si quieres descripciones destacadas de los ingenieros que crearon los manifiestos de apps web, puedes leer la propia especificación del W3C.