Modo de aplicativo com guias para PWAs

Trabalhar em mais de um documento por vez com guias no Progressive Web App

Thomas Steiner

No mundo da computação, a metáfora de área de trabalho é uma metáfora de interface que é um conjunto de conceitos unificadores usados por interfaces gráficas do usuário (GUIs) para ajudar os usuários a interagir com mais facilidade com o computador. De acordo com a metáfora do computador, as guias da GUI são modeladas com base nas guias de cartão tradicionais inseridas em livros, arquivos de papel ou índices de cartões. Uma interface de documento com guias (TDI) ou guia é um elemento de controle gráfico que permite que vários documentos ou painéis sejam contidos em uma única janela, usando guias como um widget de navegação para alternar entre conjuntos de documentos.

Os Progressive Web Apps podem ser executados em vários modos de exibição determinados pela propriedade display no manifesto do app da Web. Exemplos são fullscreen, standalone, minimal-ui e browser. 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. Com a propriedade "display_override", os desenvolvedores podem especificar a própria cadeia de fallback se necessário.

O que é o modo de aplicativo com guias

Algo que faltava na plataforma até agora é uma maneira de permitir que os desenvolvedores de PWA ofereçam aos usuários uma interface de documento com guias, por exemplo, para permitir a edição de arquivos diferentes na mesma janela do PWA. O modo de aplicativo com guias preenche essa lacuna.

Casos de uso sugeridos para o modo de aplicativo com guias

Exemplos de sites que podem usar o modo de aplicativo com guias incluem:

  • Apps de produtividade que permitem ao usuário editar mais de um documento (ou arquivo) ao mesmo tempo.
  • Apps de comunicação que permitem que o usuário tenha conversas em salas diferentes por guia.
  • Apps de leitura que abrem links de artigos em novas guias no app.

Diferenças em relação às guias criadas por desenvolvedores

Ter documentos em guias de navegador separadas vem com o isolamento de recursos sem custo financeiro, o que não é possível usando a Web hoje. As guias criadas pelo desenvolvedor não seriam dimensionadas de forma aceitável para centenas de guias como as guias do navegador. Funcionalidades do navegador, como histórico de navegação, "Copiar o URL desta página", "Transmitir esta guia" ou "Abrir esta página em um navegador da Web", seriam aplicadas à página da interface com guias criada pelo desenvolvedor, mas não à página do documento selecionada no momento.

Diferenças em relação a "display": "browser"

O "display": "browser" atual já tem um significado específico:

Abre o aplicativo da Web usando a convenção específica da plataforma para abrir hiperlinks no user agent (por exemplo, em uma guia do navegador ou em uma nova janela).

Embora os navegadores possam fazer o que quiserem em relação à interface, claramente seria uma subversão muito grande das expectativas do desenvolvedor se "display": "browser" de repente significasse "executar em uma janela específica separada do aplicativo sem affordances de navegador, mas uma interface de documento com guias".

Definir "display": "browser" é uma maneira de desativar a inclusão em uma janela de aplicativo.

Status atual

Etapa Status
1. Criar uma explicação Concluído
2. Criar um rascunho inicial da especificação Não iniciado
3. Coletar feedback e iterar o design Em andamento
4. Teste de origem Em andamento
5. Lançamento Não iniciado

Como usar o modo de aplicativo com guias

Para usar o modo de aplicativo com guias, os desenvolvedores precisam ativar os apps definindo um valor específico do modo "display_override" no manifesto do app da Web.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

Em seguida, a propriedade "tab_strip" pode ser usada para ajustar o comportamento da guia. Ela tem duas subpropriedades permitidas, "home_tab" e "new_tab_button". Se a propriedade "tab_strip" não estiver presente, os valores "auto" das propriedades específicas serão usados. O navegador determina quais valores usar para "auto".

Guia "Início"

A guia "Início" é uma guia fixada que, se ativada para um app, precisa estar sempre presente quando o app estiver aberto. Essa guia nunca deve ser navegada. Os links clicados nessa guia devem abrir em uma nova guia do app. Os apps podem personalizar o URL e o ícone exibido na guia.

Os valores permitidos para "home_tab" são:

  • "auto" para permitir que o navegador determine o que fazer.
  • "absent" para informar ao navegador que não mostre uma guia inicial.
  • Um objeto com duas subpropriedades:
    • "url" com os valores permitidos de "auto" ou um URL para bloquear a guia "Início".
    • "icons" com os valores permitidos de "auto" ou uma matriz de ícones, como na propriedade "icons" principal.

Botão "Nova guia"

O botão de nova guia, se presente, precisa abrir uma nova guia em um URL que esteja dentro do escopo do app. O app pode definir um URL e um ícone personalizados para esse botão. Os navegadores podem decidir como lidar com o arrastar dessas guias para criar novas janelas ou combiná-las com guias do navegador.

Os valores permitidos para "new_tab_button" são:

  • "auto" para permitir que o navegador determine o que fazer.
  • "absent" para informar ao navegador que não mostre um botão de nova guia.
  • Um objeto com duas subpropriedades:
    • "url" com os valores permitidos de "auto" ou um URL no escopo para abrir novas guias.
    • "icons" com os valores permitidos de "auto" ou uma matriz de ícones, como na propriedade "icons" principal.

Exemplo completo

Um exemplo completo para configurar o comportamento de um aplicativo com uma interface com guias pode ser semelhante a este:

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

Como detectar o modo de aplicativo com guias

Os apps podem detectar se estão sendo executados no modo de aplicativo com guias verificando o recurso de mídia CSS display-mode em CSS ou JavaScript:

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

Interação com a API Launch Handler

A API Launch Handler permite que os sites redirecionem inicializações de apps para janelas de apps existentes para evitar a abertura de janelas duplicadas. Quando um app com guias define "client_mode": "navigate-new", as inicializações do app abrem uma nova guia em uma janela de app existente.

Demonstração

É possível testar o modo de aplicativo com guias definindo uma sinalização do navegador:

  1. Defina a flag #enable-desktop-pwas-tab-strip.
  2. Instale o app tabbed-application-mode.glitch.me (código-fonte).
  3. Clique nos links das diferentes guias.

Captura de tela da demonstração do modo de aplicativo com guias em tabbed-application-mode.glitch.me.

Feedback

A equipe do Chrome quer saber sobre suas experiências com o modo de aplicativo com guias.

Conte sobre o design da API

Há algo no modo de aplicativo com guias que não funciona como você esperava? Comente sobre o problema do manifesto do app da Web que criamos.

Informar um problema com a implementação

Você encontrou um bug na implementação do Chrome? Registre um bug em new.crbug.com. Inclua o máximo de detalhes possível, instruções simples para reprodução e digite UI>Browser>WebAppInstalls na caixa Components. O Glitch é ótimo para compartilhar casos de reprodução rápidos e fáceis.

Mostrar suporte à API

Você planeja usar o modo de aplicativo com guias? Seu apoio público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles.

Envie um tweet para @ChromiumDev usando a hashtag #TabbedApplicationMode e informe onde e como você está usando.

Agradecimentos

O modo de aplicativo com guias foi explorado por Matt Giuca. A implementação experimental no Chrome foi o trabalho de Alan Cutter. Este artigo foi revisado por Joe Medley. Imagem principal de Till Niermann no Wikimedia Commons.