Trabalhar em mais de um documento por vez com guias no seu app Web progressivo
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 de forma mais intuitiva com o computador. Seguindo a metáfora do computador, as guias da GUI são modeladas de acordo com as guias de cartões clássicas 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. As opções 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. Usando 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 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 pelo desenvolvedor
Ter documentos em guias separadas do navegador vem com o isolamento de recursos, o que não é possível usando a Web atualmente. 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 do documento selecionada.
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 | Concluído |
| 3. Coletar feedback e iterar o design | Concluído |
| 4. Teste de origem | Concluído |
| 5. Lançamento | Concluída (ChromeOS) |
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, o padrão será o seguinte objeto:
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
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.
O membro "home_tab" do objeto "tab_strip" contém informações sobre uma "guia inicial" especial
que serve como o menu de nível superior do aplicativo. Ele contém o seguinte membro:
"scope_patterns": o membro"scope_patterns"é uma lista de padrões de URL que definem o escopo da guia "Início" em relação ao URL do manifesto.
Botão "Nova guia"
O membro "new_tab_button" do objeto "tab_strip" descreve o comportamento de uma affordance da interface (como
um botão) que, quando clicada/ativada, abre um novo contexto do aplicativo na
janela do aplicativo. Ele tem o seguinte membro:
"url": o membro"url"é uma string que representa um URL relativo ao URL do manifesto que está no escopo de um manifesto processado.
Um aplicativo tem um botão de nova guia se o membro "url" do
new_tab_button do manifesto processado estiver fora do escopo da guia inicial. Se o aplicativo não tiver um
botão de nova guia, o navegador não vai disponibilizar a affordance "nova guia" para
o usuário.
Exemplo completo
Um exemplo completo para configurar o comportamento de um app com uma interface com guias pode ser parecido com este:
{
"name": "Tabbed App Example",
"start_url": "/",
"display": "standalone",
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"scope_patterns": [
{"pathname": "/"},
{"pathname": "/index.html"}
]
},
"new_tab_button": {
"url": "/create"
}
}
}
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 vão abrir uma nova guia em uma
janela de app existente.
Demonstração
Você pode testar o aplicativo com guias no ChromeOS:
- Instale o app tabbed-application-mode.glitch.me (código-fonte).
- Clique nos links nas diferentes guias.
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 para reprodução e digite UI>Browser>WebAppInstalls na caixa Components.
O Glitch é ótimo para compartilhar casos de reprodução rápida.
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 o recurso.
Links úteis
- Explicação
- Problema de especificação do manifesto do app da Web
- Bug do Chromium
- Componente do Blink:
UI>Browser>WebAppInstalls
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 documento foi revisado por Joe Medley. Imagem principal de Till Niermann no Wikimedia Commons.
