Eu deveria estar colocando o site no ar oficialmente hoje, enviando e-mails e fazendo as pessoas instalarem o PWA 
Entendo sua frustração, mas essa não é uma resposta muito útil.
Tudo o que posso dizer no momento é que parece que algo está modificando o comportamento normal.
Você pode verificar quais plugins ou componentes de tema você instalou? Você adicionou alguma outra personalização?
Não é só o meu site. É qualquer site do Discourse???
Eu já expliquei por que isso acontece no Discourse, mas não em outros sites.
Como você é um cliente, já podemos ver a qual site você está associado. As cores dos botões são exatamente as mesmas da captura de tela que compartilhei anteriormente. Elas não são tão claras quanto as suas.
É o mesmo no tema padrão sem personalização ou componentes
1 curtida
O problema dos botões aparecendo muito claros na barra inferior branca é específico do seu dispositivo/SO. Em outros dispositivos que testei, a barra inferior é realmente branca quando o SO está no modo claro, mas os botões são cinza e permanecem visíveis. Portanto, o comportamento que você está vendo não é típico e não afeta outros usuários.
S ultra 22
Huawei mate20 pro
Dito isso, entendemos que a experiência não é ideal ao usar o PWA com um tema escuro do Discourse enquanto o SO Android está no modo claro. Como eu disse, abriremos uma discussão interna com nossos desenvolvedores e designers para explorar como podemos melhorar esse cenário em futuras atualizações.
1 curtida
Isso é estranho e contradiz o que você disse. É como tentar a sorte, haha.
Este é um Samsung S24 no modo claro
Este é um Google Pixel no modo claro
Um iPhone não carregou a barra, semelhante ao problema que @chapoi teve.
Um Samsung S22 mais antigo carregou corretamente com uma barra inferior branca e ícones mais escuros. Tenho mais 10 pessoas fazendo um teste mais tarde e atualizarei com mais informações.
1 curtida
Acredito que o navegador Chrome possa lidar com isso em alguns casos, dependendo da versão do Android, dispositivo, etc…
Em um PWA, a <meta name="theme-color"> altera de forma confiável a cor da barra de endereço superior no Chrome no Android. A theme_color no manifest.json afeta a barra de status e, às vezes, outras partes da interface do usuário, mas o comportamento varia de acordo com o dispositivo, navegador e versão do Android.
A barra de navegação inferior nativa geralmente não pode ser controlada por um aplicativo da web. Alguns navegadores podem aplicar a cor do tema, mas isso não é garantido.
Esta é uma das razões pelas quais converti meu site em um TWA, usando o Bubblewrap, que também pode lidar com as cores da barra de navegação inferior.
Portanto, com um PWA, você pode estilizar a barra superior, mas o controle da barra de navegação inferior é inconsistente.
O iPhone não carregará esta barra de navegação porque este é um elemento nativo do sistema operacional Android.
2 curtidas
É estranho, nunca encontrei esse problema antes. Usei o super pwa do WordPress em 9 sites e nunca tive um problema. Apenas o do Discourse. Como você afirma ter encontrado o mesmo problema de inconsistência, espero que eles possam fazer o estilo da barra inferior igual à superior, pois isso funciona como esperado em todos os dispositivos.
@dax @chapoi ainda mais bizarro. Se eu instalo o pwa no meu celular através do firefox ele funciona perfeitamente. Pelo menos agora consigo ver os botões inferiores.
Este está no modo claro
1 curtida
O motivo pelo qual funciona no Firefox, mas não no Chrome, se resume a como cada navegador lida com PWAs no Android, pois o Chrome apenas verifica o theme_color no Web App Manifest para colorir a barra do sistema. Se o manifest não for servido do domínio raiz do site ou não tiver a cor certa, o Chrome simplesmente volta para o branco. O Firefox é mais flexível e pega as cores da própria página, então a barra fica correta mesmo sem um manifest personalizado.
Portanto, daqui para frente, tenho um site Discourse hospedado que é uma paleta escura, desativamos todas as outras paletas para que os usuários não possam escolher, o que está alinhado com nossa marca. Temos um tema habilitado que os usuários não podem alterar.
Como podemos fazer a barra inferior #121212 no PWA no Chrome, já que ter um aplicativo instalável é importante para nós?
O site escuro e uma barra inferior clara são tão distrativos e parecem horríveis.
Como eu disse antes, abri uma discussão interna para explorar possíveis melhorias para este cenário. No entanto, com o encontro global do Discourse chegando em breve, a equipe não poderá fazer nenhuma alteração no curto prazo e, infelizmente, não há uma solução alternativa que possa garantir que a barra inferior sempre apareça escura neste momento.
Seguimento rápido. Isso foi atribuído a um engenheiro para revisão. No entanto, tenha em mente que o encontro anual do Discourse está chegando muito em breve, então não acho que haverá atualizações no curto prazo (por curto prazo, quero dizer “dias”).
5 curtidas