Verificador de manifiesto PWA

Chrome requiere todo esto para el aviso de instalación: (1) Un manifiesto de aplicación web vinculado desde HTML con <link rel="manifest">. (2) Un campo name en el manifiesto. (3) Un campo start_url. (4) Un valor de display de "standalone", "fullscreen" o "minimal-ui". (5) Iconos con al menos 192×192 y 512×512 de tamaño. (6) El sitio servido a través de HTTPS. Si falta cualquiera de estos, Chrome no mostrará el botón de instalación en la barra de direcciones.

Los iconos enmascarables (purpose: "maskable") están diseñados para ser recortados de forma segura en cualquier forma — círculo, squircle, cuadrado redondeado, etc. — dependiendo del lanzador del dispositivo. Sin un icono enmascarable, Android puede añadir un fondo de círculo blanco detrás de su icono, lo que tiene un aspecto inconsistente. La "zona segura" para los iconos enmascarables es el 80% central de la imagen — mantenga su logotipo dentro de esta área. Necesita tanto un icono normal (purpose: "any") como un icono enmascarable para mejores resultados. Use maskable.app para verificar y crear iconos enmascarables.

display controla la interfaz de usuario del navegador que se muestra cuando se inicia la aplicación: "standalone" — similar a una aplicación nativa, sin barra de direcciones del navegador (opción más común). "fullscreen" — cubre toda la pantalla, sin interfaz del sistema (usado para juegos). "minimal-ui" — muestra parte de la navegación del navegador pero oculta la barra de direcciones. "browser" — se abre en el navegador completo (anula el propósito de la PWA). Use "standalone" para la mayoría de las aplicaciones. Nota: Safari en iOS usa el modo de visualización standalone solo cuando el usuario añade a la pantalla de inicio mediante el menú de compartir — el banner de instalación funciona diferente en iOS.

Las capturas de pantalla (el array screenshots) son usadas por la interfaz de instalación mejorada de Chrome, que muestra un cuadro de diálogo de instalación enriquecido con el nombre de la aplicación, la descripción y las imágenes de vista previa. Sin capturas de pantalla, Chrome usa un aviso de instalación mínimo. También se usan en la Chrome Web Store y algunos listados de tiendas de aplicaciones. Incluya al menos 2 capturas de pantalla para el factor de forma wide (escritorio) y 2 para narrow (móvil). Las dimensiones deben estar entre 320×320 y 3840×2160 píxeles con una relación de aspecto consistente.

Sí — se requiere un service worker para el aviso de instalación de PWA en Chrome (aunque este validador solo verifica el manifiesto). El service worker debe estar registrado en la página y en estado de funcionamiento. Un service worker mínimo que solo responde a eventos fetch es suficiente. El service worker habilita la funcionalidad sin conexión y es parte de los tres pilares de la PWA: manifiesto + service worker + HTTPS. Herramientas como Workbox (workbox-window) hacen la configuración del service worker mucho más sencilla.