Não define uma cor de tema para a barra de endereço
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.
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 #
- Código fonte para a auditoriaNão define uma cor de tema para a barra de endereço
- Adicionar um manifesto web app
- Suporte a
theme-color
no Chrome 39 para Android