Preparação para os modos de exibição do amanhã

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.

  1. "window-controls-overlay" (Primeiro, olhe para display_override.)
  2. "minimal-ui"
  3. "standalone" (quando display_override terminar, avalie display).
  4. "minimal-ui" (por fim, use a cadeia de substituição display).
  5. "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.

Agradecimentos

A propriedade display_override foi formalizada por Daniel Murphy.