Os PWAs podem usar a propriedade "display_override" para processar modos de exibição especiais.
Um manifesto de app da Web é um arquivo JSON que informa o navegador sobre seu Progressive
Web App e como ele deve se comportar quando instalado no computador ou no dispositivo móvel do usuário.
Com a propriedade display
, é possível personalizar a IU do navegador que será exibida quando o app for iniciado. Por exemplo, você pode ocultar a
barra de endereço e o Chrome do navegador. Os jogos podem até ser feitos para abrir em tela cheia.
Recapitulando, confira abaixo os modos de exibição especificados no momento em que este artigo foi escrito.
Propriedade | Uso |
---|---|
fullscreen |
Abre o aplicativo da Web sem nenhuma IU do navegador e ocupa toda a área de exibição disponível. |
standalone |
Abre o app da Web para parecer um app independente. O app é executado na própria janela, separado do navegador, e oculta elementos padrão da IU do navegador, como a barra de URL. |
minimal-ui |
Esse modo é semelhante ao standalone , mas fornece ao
usuário um conjunto mínimo de elementos da IU para controlar a navegação, como
voltar e atualizar.
|
browser |
Uma experiência padrão no navegador. |
Esses modos de exibição seguem uma cadeia de substituto bem definida
("fullscreen"
→ "standalone"
→ "minimal-ui"
→ "browser"
). Se um navegador não oferecer suporte a um determinado
modo, ele voltará para o próximo modo de exibição na cadeia.
Limitações da propriedade display
O problema com essa abordagem da cadeia de substitutos com fio é triplo:
- Um desenvolvedor não pode solicitar
"minimal-ui"
sem ser forçado de volta ao modo de exibição"browser"
caso"minimal-ui"
não seja compatível com um determinado navegador. - Os desenvolvedores não têm como lidar com diferenças entre navegadores, por exemplo, se o navegador inclui ou exclui um botão "Voltar" na janela do modo
"standalone"
. - O comportamento atual impossibilita a introdução de novos modos de exibição de maneira compatível com versões anteriores, já que análises detalhadas como o modo de app com guias não têm um local natural na cadeia de substitutos.
A propriedade display_override
Esses problemas são resolvidos pela propriedade display_override
, que o navegador considera antes da propriedade display
. O valor dela é uma sequência de strings consideradas em ordem, e o
primeiro modo de exibição compatível é aplicado. Se nenhum for compatível, o navegador voltará a avaliar o campo display
.
No exemplo abaixo, a cadeia de substitutos do modo de exibição é a seguinte.
Os detalhes de "window-controls-overlay"
estão fora do escopo deste artigo.
"window-controls-overlay"
Primeiro, observedisplay_override
."minimal-ui"
"standalone"
. Quando odisplay_override
se esgotar, avaliedisplay
."minimal-ui"
Por fim, use a cadeia de substitutosdisplay
."browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
Para manter a compatibilidade com versões anteriores, qualquer modo de exibição futuro vai ser aceitável apenas como um valor de
display_override
, mas não de display
.
Navegadores que não são compatíveis com display_override
recorrem à propriedade display
e ignoram display_override
como uma propriedade de manifesto de app da Web desconhecida.
Links úteis
- Explicação
- Intent de envio de linha de execução
- Bug do Chromium
- Entrada de status do Chrome
- Repositório Incubations
Agradecimentos
A propriedade display_override
foi formalizada por
Daniel Murphy.