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. Seguindo a metáfora do computador, as guias da GUI são modeladas de acordo com as guias de cartões tradicionais inseridas em livros, arquivos em 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

Até agora, a plataforma não tinha uma maneira de permitir que os desenvolvedores de PWA oferecessem aos usuários uma interface de documento com guias, por exemplo, para permitir a edição de arquivos diferentes na mesma janela de 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:

  • 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 pelo desenvolvedor

Ter documentos em guias separadas do navegador 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. As características do navegador, como o 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 de 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 agente do usuário (por exemplo, em uma guia do navegador ou em uma nova janela).

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

A configuração "display": "browser" é a maneira de desativar a inserção em uma janela do 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 de modo "display_override" específico 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 app com uma interface com guias pode ser parecido com 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 que janelas duplicadas sejam abertas. Quando um app com guias define "client_mode": "navigate-new", as inicializações do app vão abrir uma nova guia em uma janela de app existente.

Demonstração

Para testar o modo de aplicativo com guias, defina uma flag 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 para a API

Você pretende 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.