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

Os PWAs podem usar a propriedade "display_override" para processar modos de exibição especiais.

Thomas steiner

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.

  1. "window-controls-overlay" Primeiro, observe display_override.
  2. "minimal-ui"
  3. "standalone". Quando o display_override se esgotar, avalie display.
  4. "minimal-ui" Por fim, use a cadeia de substitutos 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 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.

Agradecimentos

A propriedade display_override foi formalizada por Daniel Murphy.