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 app da Web progressivo e como ele se comporta quando instalado no computador ou dispositivo móvel do usuário. Com a propriedade display, é possível personalizar qual interface do navegador é mostrada quando o app é iniciado. Por exemplo, você pode ocultar a barra de endereço e o navegador Chrome. Os jogos podem até ser iniciados em tela cheia. Confira abaixo uma breve recapitulação dos modos de exibição especificados no momento em que este artigo foi escrito.

Propriedade Uso
fullscreen Abre o aplicativo da Web sem nenhuma interface do navegador e ocupa toda a área de exibição disponível.
standalone Abre o app da Web para que ele pareça um app independente. O app é executado na própria janela, separada do navegador, e oculta elementos de IU padrão do navegador, como a barra de URL.
minimal-ui Esse modo é semelhante ao 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 do navegador.

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

Desvantagens da propriedade display

Há três problemas com essa abordagem de cadeia de fallback fixa:

  • 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 tenha suporte para 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 do modo "standalone".
  • O comportamento atual torna impossível introduzir novos modos de exibição de forma 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 dela é uma sequência de strings que são consideradas em ordem, e o primeiro modo de exibição compatível é aplicado. Se nenhum deles tiver suporte, o navegador vai avaliar o campo display.

No exemplo abaixo, a cadeia de fallback 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, analise 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, e não display. Os navegadores que não oferecem suporte a 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.