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 do app da Web é um arquivo JSON que informa ao navegador sobre seu App Web Progressivo e como ele deve se comportar quando instalado no computador ou dispositivo móvel do usuário. Com a display propriedade, é possível personalizar a interface do navegador mostrada quando o app é iniciado. Por exemplo, você pode ocultar a barra de endereço e o Chrome do navegador. Os jogos podem até ser feitos para serem iniciados em tela cheia. Como um resumo rápido, 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 interface 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, separada do navegador, e oculta elementos da interface padrão 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 da interface para controlar a navegação (como voltar e recarregar).
browser Uma experiência de navegador padrão.

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

Deficiências da propriedade display

O problema com essa abordagem de cadeia de substitutos 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 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 volta a avaliar o campo display.

No exemplo abaixo, a cadeia de substitutos 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, confira 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á aceitável como um valor de display_override, mas não display. Os navegadores que não oferecem suporte a 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.