Não está configurado para uma tela inicial personalizada

Published on Updated on

Translated to: English, Español, 한국어, 中文

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:

Auditoria do Lighthouse mostrando que o site não está configurado para ter 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 icons especifica 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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.