Uma tela de apresentação personalizada faz com que seu Progressive Web App (PWA) pareça mais um app criado para esse dispositivo. Por padrão, quando um usuário inicia o PWA na tela inicial, o Android mostra 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 de apresentação personalizada, é possível mostrar aos usuários uma cor de plano de fundo personalizada e o ícone do PWA, proporcionando uma experiência envolvente e da marca.
Por que a auditoria de tela de apresentação do Lighthouse falha
O Lighthouse sinaliza páginas que não têm uma tela de apresentação personalizada:
Como criar uma tela de apresentação personalizada
O Chrome para Android mostra automaticamente sua tela de apresentação personalizada, desde que você atenda aos seguintes requisitos no manifesto do app da Web:
- A propriedade
nameestá definida como o nome do PWA. - A propriedade
background_colorestá definida como um valor de cor CSS válido. - A propriedade
theme_colorestá definida como um valor de cor CSS válido. - A matriz
iconsespecifica um ícone de pelo menos 512 x 512 px. - O ícone especificado existe e é um arquivo PNG.
Consulte Adicionar uma tela de apresentação para apps da Web instalados no Chrome 47 para mais informações.
Recursos
Código-fonte da auditoria Não está configurado para uma tela de apresentação personalizada