Não define uma cor de tema para a barra de endereço

— Atualizado
Available in: Español, 日本語, 한국어, Русский, 中文, English
Appears in: Auditorias de PWA
Nesta página

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:

Auditoria Lighthouse mostrando barra de endereço que não tem o tema das cores da página

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 #

Last updated: — Improve article
Return to all articles
Compartilhar