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

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

Thomas Steiner

Um manifesto de app da Web é um arquivo JSON que informa ao navegador sobre seu PWA 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 aparece quando o app é iniciado. Por exemplo, você pode ocultar a barra de endereço e o cromo do navegador. Os jogos podem até ser feitos para abrir em tela cheia. Como um breve resumo, confira abaixo os modos de exibição especificados no momento em que este artigo foi escrito.

Propriedade Usar
fullscreen Abre o aplicativo da Web sem interface do navegador e ocupa toda a área de exibição disponível.
standalone Abre o app da Web para ter a aparência de um app independente. O app é executado em uma janela separada do navegador e oculta elementos padrão da interface do navegador, como a barra de URL.
minimal-ui Esse modo é semelhante a standalone, mas oferece ao usuário um conjunto mínimo de elementos de interface para controlar a navegação (como voltar e recarregar).
browser Uma experiência padrão de navegador.

Esses modos de exibição seguem uma cadeia de substitutos bem definida ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Se um navegador não for compatível com um determinado modo, ele vai usar o próximo modo de exibição na cadeia.

Deficiências da propriedade display

O problema com essa abordagem de cadeia de substituição fixa é triplo:

  • Um desenvolvedor não pode solicitar "minimal-ui" sem ser forçado a voltar para o 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 novos modos de exibição de maneira compatível com versões anteriores, já que explorações como o modo de aplicativo com guias não têm um lugar natural na cadeia de fallback.

A propriedade display_override

Esses problemas são resolvidos pela propriedade display_override, que o navegador considera antes da propriedade display. O valor é 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 vai avaliar o campo display.

No exemplo abaixo, a cadeia de substituição do modo de exibição seria assim: Os detalhes de "window-controls-overlay" estão fora do escopo deste artigo.

  1. "window-controls-overlay" (Primeiro, consulte display_override.)
  2. "minimal-ui"
  3. "standalone" (Quando display_override estiver esgotado, 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 só será aceito como um valor de display_override, mas não display. Os navegadores que não são compatíveis com display_override usam 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.