Trabalhar em mais de um documento por vez com guias no seu Progressive Web App
No mundo da computação, a metáfora do computador é uma metáfora da interface que é um conjunto de conceitos unificados usado pelas interfaces gráficas do usuário (GUI) para ajudar os usuários a interagir mais facilmente com o computador. De acordo com a metáfora do computador, as guias da GUI são modeladas de acordo com as guias tradicionais de cartões 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 fiquem 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. Os exemplos são fullscreen, standalone, minimal-ui
e browser. Esses modos de exibição seguem uma
cadeia de substituto 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. Com a propriedade
"display_override", os desenvolvedores podem especificar a própria cadeia de substituto,
se necessário.
O que é o modo de aplicativo com guias
Algo que falta 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 app 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 ao usuário conversar em diferentes salas por guia.
- Apps de leitura que abrem links para artigos em novas guias no app.
Diferenças em relação às guias criadas para desenvolvedores
Ter documentos em guias separadas do navegador vem com o isolamento de recursos sem custo financeiro, o que não é possível na Web atualmente. As guias criadas pelo desenvolvedor não podem ser dimensionadas de forma aceitável para centenas de guias, como as do navegador. Recursos do navegador, como histórico de navegação, "Copiar este URL da página", "Transmitir esta guia" ou "Abrir esta página em um navegador da Web", seriam aplicados à página da interface com guias criada pelo desenvolvedor, mas não à página do documento selecionada.
Diferenças de "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, seria claramente uma subversão muito grande das expectativas dos desenvolvedores se "display": "browser" de repente significasse "executar em uma janela separada específica do aplicativo sem recursos do navegador, mas uma interface de documento com guias".
Definir "display": "browser" é efetivamente a maneira de desativar a inclusão em uma janela de
aplicativos.
Status atual
| Step | Status |
|---|---|
| 1. Criar explicação | Concluído |
| 2. Criar rascunho inicial da especificação | Not started |
| 3. Reunir feedbacks e iterar no design | Em andamento |
| 4. Teste de origem | Em andamento |
| 5. lançamento | Not started |
Uso do 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 inicial é uma guia fixada que, se ativada para um app, precisa estar sempre presente quando o app estiver aberto. Essa guia nunca deve navegar. Os links clicados nessa guia serão abertos em uma nova guia do app. Os apps podem personalizar o URL a que a guia está bloqueada e o ícone exibido nela.
Os valores permitidos para "home_tab" são:
"auto"para permitir que o navegador determine o que fazer."absent"para instruir o navegador a não mostrar uma guia inicial.- Um objeto com duas subpropriedades:
"url"com os valores permitidos de"auto"ou um URL para bloquear a guia inicial."icons"com os valores permitidos de"auto"ou uma matriz de ícones, como na propriedade"icons"principal.
Botão "Nova guia"
O botão "Nova guia", se presente, deve abrir uma nova guia em um URL que está no escopo do aplicativo. O aplicativo pode definir um URL e um ícone personalizados para esse botão. Os navegadores podem decidir como arrastar essas guias para criar novas janelas ou combinar com guias.
Os valores permitidos para "new_tab_button" são:
"auto"para permitir que o navegador determine o que fazer."absent"para informar ao navegador para não mostrar um botão "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 de configuração do comportamento de um app com uma interface com guias é o seguinte:
{
"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"
}
]
}
}
}
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 as inicializações de
apps em janelas de apps já existentes para evitar que janelas duplicadas sejam abertas. Quando um
app com guias define "client_mode": "navigate-new", a inicialização do app abre uma nova guia em uma
janela do app existente.
Demonstração
Teste o modo de aplicativo com guias definindo uma sinalização do navegador:
- Defina a flag
#enable-desktop-pwas-tab-strip. - Instale o app tabbed-application-mode.glitch.me (código-fonte).
- Clique nos links de cada guia.
Feedback
A equipe do Chrome quer saber sobre suas experiências com o modo de aplicativo com guias.
Fale sobre o design da API
Há algo no modo de aplicativo com guias que não funciona como esperado? 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 insira UI>Browser>WebAppInstalls na caixa Componentes.
O Glitch funciona muito bem para compartilhar casos de reprodução rápidos e fáceis.
Mostrar suporte à API
Você planeja usar o modo de aplicativo com guias? Seu suporte público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegador como é fundamental oferecer suporte a eles.
Envie um tweet para @ChromiumDev usando a hashtag
#TabbedApplicationMode
e conte para nós onde e como você está usando a hashtag.
Links úteis
- Explicação
- Problema de especificação do manifesto do app da Web
- Bug do Chromium
- Componente Blink:
UI>Browser>WebAppInstalls
Agradecimentos
O modo de aplicativo com guias foi explorado por Matt Giuca. A implementação experimental no Chrome foi trabalho de Alan Cutter. Este artigo foi revisado por Joe Medley. Imagem principal de Till Niermann no Wikimedia Commons.
