Não define uma cor de tema para a barra de endereço
Published on • Updated on
Aplicar um tema na barra de endereço do navegador para corresponder às cores da marca de seu Progressive Web App (PWA) fornece uma experiência de usuário mais envolvente.
Compatibilidade dos navegadores
No momento em que este artigo foi escrito, o tema da barra de endereço do navegador era suportado em navegadores baseados em Android. Veja a compatibilidade dos navegadores para atualizações.
Como a auditoria de cor do tema do Lighthouse falha
O Lighthouse marca páginas que não aplicam um tema à barra de endereço:
A auditoria falha se o Lighthouse não encontrar uma meta tag theme-color no HTML da página e uma propriedade theme_color no manifesto web app.
Observe que o Lighthouse não testa se os valores são valores de cor CSS válidos.
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 definir uma cor de tema para a barra de endereço
Passo 1: adicione uma meta tag theme-color a cada página que deseja marcar
A meta tag theme-color garante que a barra de endereço seja marcada quando um usuário visitar seu site como uma página da web normal. Defina o atributo content da tag para qualquer valor de cor CSS válido:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…Saiba mais sobre a meta tag theme-color no artigo Suporte a theme-color no Chrome 39 para Android do Google.
Passo 2: adicione a propriedade theme_color ao seu manifesto web app
A propriedade theme_color em seu manifesto web app garante que a barra de endereço seja marcada quando um usuário iniciar seu PWA a partir da tela inicial. Ao contrário da meta tag theme-color do tema, você só precisa defini-la uma vez, no manifesto. Defina a propriedade para qualquer valor de cor CSS válido:
{
"theme_color": "#317EFB"
…
}O navegador definirá a cor da barra de endereço de cada página do seu aplicativo de acordo com o theme_color do manifesto.
Recursos
Updated on • Improve article