Validador de Web App Manifest

Uma Progressive Web App só é instalada de forma limpa quando o seu manifest.json satisfaz os campos que os browsers e as lojas de aplicações realmente verificam. Este validador analisa o manifesto que carregou e percorre campo a campo a especificação W3C Web App Manifest: assinala a falta de name e short_name, um array icons vazio ou mal formado, ícones sem src, sizes ou type, um start_url que não pode ser interpretado, um valor de display não reconhecido e cadeias theme_color ou background_color que não são cores CSS válidas. Cada ocorrência é mostrada como uma frase em linguagem simples — e não como uma citação direta da especificação — para que saiba exatamente o que corrigir e por que razão isso é importante para a instalação.

A funcionalidade principal é a pré-visualização da zona segura do ícone maskable. Os ícones adaptativos do Android aplicam uma forma de máscara escolhida pelo SO — círculo, retângulo arredondado, lágrima, entre outras — a qualquer ícone marcado com "purpose": "maskable". Tudo o que estiver fora de um círculo centrado que cobre 40% da área de visualização do ícone pode ser cortado, dependendo da máscara que o dispositivo aplicar. Carregue os ficheiros de imagem de ícone referenciados pelo seu manifesto juntamente com o manifest.json, e esta ferramenta faz a correspondência pelo nome do ficheiro, desenha cada ícone maskable num canvas com o seu tamanho declarado e sobrepõe exatamente esse círculo da zona segura, para que possa ver com os seus próprios olhos se a sua arte sobrevive ao recorte.

O distintivo de aprovado/reprovado por baixo de cada pré-visualização não é um item cosmético de checklist — resulta de uma análise real, pixel a pixel, dos dados da imagem descodificada. A ferramenta mede a quantidade de conteúdo não transparente que se situa fora do círculo da zona segura (conteúdo que uma máscara cortaria) e a percentagem do ícone que é transparente (os ícones maskable devem ter um fundo opaco de sangria total, uma vez que a transparência deixa transparecer a cor da máscara subjacente). Ambas as verificações são executadas sobre o bitmap real que carregou, pelo que o resultado reflete o seu ficheiro de ícone verdadeiro, e não uma suposição.

Tudo acontece localmente no seu browser: o manifest.json é lido com a API File, os ícones são descodificados com createImageBitmap ou um fallback FileReader/Image e os pixels são analisados num canvas em memória. Nada é enviado para um servidor, o que é importante se o seu manifesto referenciar um nome de app ainda não público, caminhos start_url internos ou ícones em desenvolvimento.