Os PWAs podem usar a interface para lidar com modos de exibição especiais.
Um manifesto de app da Web é um arquivo JSON que informa ao navegador sobre o
App da Web e como ele deve se comportar quando instalado no computador ou dispositivo móvel do usuário.
Com a propriedade display
, é possível personalizar a interface do navegador que é exibida quando o app é iniciado. Por exemplo, é possível ocultar
barra de endereço e navegador Chrome. É possível até criar jogos para abrir em tela cheia.
Como uma recapitulação rápida, abaixo estão os modos de exibição especificados na época em que este artigo foi escrito.
Propriedade | Uso |
---|---|
fullscreen |
Abre o aplicativo da web sem nenhuma interface de usuário do navegador e leva por toda a área de exibição disponível. |
standalone |
Abre o app da Web para parecer independente app. O app é executado na própria janela, separada do navegador. oculta elementos de interface de usuário padrão do navegador, como a barra de URL. |
minimal-ui |
Esse modo é semelhante ao standalone , mas fornece a
ao usuário um conjunto mínimo de elementos de IU para controlar a navegação (como
como "Voltar" e "Atualizar").
|
browser |
Uma experiência de navegador padrão. |
Esses modos de exibição seguem uma cadeia de substituição bem definida
("fullscreen"
→ "standalone"
→ "minimal-ui"
→ "browser"
). Se um navegador não for compatível com um determinado
ele volta para o próximo modo de exibição na cadeia.
Falhas na propriedade display
O problema com essa abordagem de cadeia de substitutos integrada é três:
- Um desenvolvedor não pode solicitar
"minimal-ui"
sem ser forçado a voltar 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, como se o navegador inclui ou exclui um botão "Voltar" na janela para o modo
"standalone"
. - O comportamento atual impossibilita a introdução de uma nova tela de maneira compatível com versões anteriores, já que análises detalhadas, como o modo de aplicativo com guias, não têm um lugar natural na cadeia de substituto.
A propriedade display_override
Esses problemas são resolvidos pela propriedade display_override
, que o navegador considera antes
a propriedade display
. Seu valor é uma sequência de strings consideradas em ordem, e o
primeiro modo de exibição compatível é aplicado. Se nenhum for suportado, o navegador voltará a avaliar
o campo display
.
No exemplo abaixo, a cadeia de substituto do modo de exibição seria a seguinte.
Os detalhes de "window-controls-overlay"
estão fora do escopo deste artigo.
"window-controls-overlay"
(Primeiro, olhe paradisplay_override
.)"minimal-ui"
"standalone"
(quandodisplay_override
terminar, avaliedisplay
)."minimal-ui"
(por fim, use a cadeia de substituiçãodisplay
)."browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
Para manter a compatibilidade com versões anteriores, qualquer modo de exibição futuro só será aceitável se o valor de
display_override
, mas não display
.
Navegadores que não são compatíveis com display_override
voltam para a propriedade display
e ignoram
display_override
como uma propriedade desconhecida do manifesto do app da Web.
Links úteis
- Explicação
- Conversa com a intenção de enviar
- Bug do Chromium
- Entrada de status do Chrome
- Repositório de incubações de manifestos
Agradecimentos
A propriedade display_override
foi formalizada por
Daniel Murphy.