El manifiesto de la aplicación web

El manifiesto de una aplicación web es un archivo JSON que indica al navegador cómo instalar la página como una aplicación: qué nombre usar, qué icono mostrar, qué URL abrir, qué esquema de colores aplicar y en qué modo de visualización ejecutarla (standalone, fullscreen o browser).

Haga referencia al manifiesto desde cada página que deba poder instalarse: <link rel="manifest" href="/manifest.webmanifest"> en la cabecera. El navegador lo descarga una vez y lo almacena en caché; las actualizaciones del manifiesto se detectan en cargas posteriores.

Para que el navegador ofrezca «Instalar aplicación», el manifiesto necesita como mínimo: name (nombre completo), short_name (etiqueta de la pantalla de inicio, de unos 12 caracteres), start_url, display (normalmente "standalone") y un arreglo icons con al menos un PNG de 192x192 y otro de 512x512.

Es la URL que se abre al pulsar el icono de la aplicación instalada. A menudo es / para la página de inicio, pero puede incluir parámetros de consulta para analítica: "start_url": "/?source=pwa" permite distinguir las sesiones instaladas de las sesiones del navegador.

display puede ser "browser" (controles normales del navegador), "minimal-ui" (algunos controles), "standalone" (sin controles del navegador; parece una aplicación) o "fullscreen" (sin barra de estado). Standalone es la opción habitual para una PWA.

Incluya un icono con el propósito "maskable" para que Android pueda adaptar su forma y hacerla coincidir con la de los demás iconos de la pantalla de inicio: { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Los iconos maskable incluyen una zona segura para que el sistema pueda recortarlos.

theme_color establece el tono de la barra de direcciones cuando la aplicación se ejecuta en un navegador. background_color se muestra como fondo de la pantalla de inicio antes de que se cargue la página. Utilice los colores primarios de su sistema de diseño para lograr una apertura cuidada.

"orientation": "portrait" bloquea la aplicación en orientación vertical cuando está instalada. "any", "landscape" y "portrait-primary" son alternativas. La mayoría de las PWA de propósito general dejan este campo sin definir y permiten que el dispositivo determine la orientación.

Para que el navegador muestre «Instalar», la página debe servirse mediante HTTPS, registrar un service worker que gestione eventos fetch, vincular un manifiesto válido con los campos mínimos y cumplir los criterios de interacción, como que el usuario haya interactuado con la página.

Los navegadores almacenan el manifiesto en caché. Para forzar una actualización después de editarlo, cambie las URL de los iconos, por ejemplo mediante un parámetro de consulta para invalidar la caché, o espere: la mayoría de los navegadores vuelven a comprobarlo periódicamente. No existe una API para forzar la actualización; diseñe teniendo en cuenta que los usuarios pueden utilizar durante un tiempo un manifiesto ligeramente desactualizado.

La pestaña Application de Chrome DevTools muestra el manifiesto analizado, los valores calculados y los errores de validación. La auditoría PWA de Lighthouse comprueba cada requisito de instalación e indica qué falta. Utilice ambas herramientas durante el desarrollo para confirmar que la aplicación puede instalarse.

¿Qué hace el valor display: "standalone" en el manifiesto de una aplicación web?

El manifiesto de una aplicación web (manifest.webmanifest) indica al navegador cómo instalar la página como una aplicación: name, short_name, start_url, display, theme_color e icons (192 y 512, además de maskable para Android). Vincúlelo mediante <link rel="manifest">, asegúrese de utilizar HTTPS y un service worker para que pueda instalarse, y pruébelo en Chrome DevTools y en la auditoría PWA de Lighthouse.