Não está configurado para uma tela inicial personalizada
Published on • Updated on
Uma tela inicial personalizada torna seu Progressive Web App (PWA) mais parecido com um aplicativo criado para esse dispositivo. Por padrão, quando um usuário inicia seu PWA a partir da tela de início, o Android exibe uma tela branca até que o PWA esteja pronto. O usuário pode ver essa tela em branco por até 200 ms. Ao configurar uma tela inicial personalizada, você pode mostrar aos usuários uma cor de fundo personalizada e o ícone do seu PWA, proporcionando uma experiência de marca e envolvente.
Como a auditoria da tela inicial do Lighthouse falha
O Lighthouse sinaliza páginas que não têm uma tela inicial personalizada:
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
Como criar uma tela inicial personalizada
O Chrome para Android mostra automaticamente sua tela inicial personalizada, desde que você atenda aos seguintes requisitos no manifesto do seu aplicativo da web:
- A propriedade
nameé definida como o nome do seu PWA. - A propriedade
background_coloré definida como um valor de cor CSS válido. - A matriz
iconsespecifica um ícone de pelo menos 512x512 px. - O ícone especificado existe e é um PNG.
Consulte Adicionando uma tela inicial para aplicativos da Web instalados no Chrome 47 para obter mais informações.
Embora a auditoria do Lighthouse seja aprovada quando um único ícone de 512x512 px estiver presente, há algumas divergências sobre quais ícones um PWA deve incluir. Consulte Auditoria: cobertura do tamanho do ícone para ver uma discussão sobre os prós e os contras das diferentes abordagens.
Recursos
Código-fonte da auditoria Não está configurado para uma tela inicial personalizada
Updated on • Improve article