Validador de manifiesto de aplicación web

Una aplicación web progresiva solo se instala limpiamente cuando su manifest.json satisface los campos que los navegadores y las tiendas de aplicaciones realmente verifican. Este validador analiza su manifiesto subido y recorre la especificación del Manifiesto de la aplicación web del W3C campo por campo: marca un nombre faltante y un nombre corto, una matriz de íconos vacía o con formato incorrecto, íconos a los que les falta un src, tamaños o tipo, una URL de inicio no analizable, un valor de visualización no reconocido y cadenas theme_color o background_color que no son colores CSS válidos. Cada hallazgo se muestra como una oración en inglés simple, no como una cita de especificaciones sin formato, para que sepa exactamente qué corregir y por qué es importante para la instalación.

La característica principal es la vista previa de la zona segura con íconos enmascarables. Los íconos adaptativos de Android aplican una forma de máscara elegida por el sistema operativo (círculo, ardilla, lágrima y más) a cualquier ícono marcado como "propósito": "enmascarable". Todo lo que esté fuera de un círculo centrado que cubra el 40% de la ventana gráfica del ícono se puede recortar dependiendo de la máscara que aplique el dispositivo. Cargue los archivos de imagen de íconos a los que hace referencia su manifiesto junto con manifest.json, y esta herramienta los relaciona por nombre de archivo, dibuja cada ícono enmascarable en un lienzo en su tamaño declarado y superpone ese círculo exacto de zona segura para que pueda ver con sus propios ojos si su obra de arte sobrevive al recorte.

La insignia de aprobación/rechazo debajo de cada vista previa no es un elemento cosmético de la lista de verificación: proviene de un análisis real por píxel de los datos de la imagen decodificada. La herramienta mide cuánto contenido que no es de fondo se encuentra fuera del círculo de la zona segura (contenido que una máscara recortaría) y qué parte del ícono es transparente (los íconos enmascarables deben tener un fondo opaco sin sangrado, ya que la transparencia permite que se vea el color de la máscara subyacente). Ambas comprobaciones se ejecutan con el mapa de bits real que has subido, por lo que el resultado refleja tu archivo de icono real, no una suposición.

Todo sucede localmente en su navegador: manifest.json se lee con File API, los íconos se decodifican con createImageBitmap o un recurso alternativo de FileReader/Image, y los píxeles se analizan en un lienzo en memoria. No se carga nada en un servidor, lo cual es importante si su manifiesto hace referencia a un nombre de aplicación que aún no es público, rutas internas de start_url o íconos en desarrollo.