Não está configurado para uma tela de apresentação personalizada

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:

Auditoria do Lighthouse mostrando que o site não está configurado para 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 name está definida como o nome do PWA.
  • A propriedade background_color está definida como um valor de cor CSS válido.
  • A propriedade theme_color está definida como um valor de cor CSS válido.
  • A matriz icons especifica 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