Publicado em: 19 de agosto de 2025
O gerenciamento de navegação abrange os métodos para controlar como um Progressive Web App (PWA) lida com a navegação do usuário. Um componente essencial disso é a captura de navegação, o processo do navegador que determina se clicar em um link deve iniciar o PWA instalado ou abrir uma nova guia do navegador.
Este guia aborda a nova versão da captura de navegação, disponível a partir do Chrome 139. Embora o comportamento padrão do navegador seja adequado para a maioria dos casos, é essencial entender melhor essas técnicas de gerenciamento e as APIs relacionadas se você quiser criar a experiência mais tranquila para seus usuários.
A seção Controles do desenvolvedor mostra como personalizar a navegação para oferecer a melhor experiência de inicialização possível para seu PWA.
O novo comportamento padrão
Para se alinhar às preferências do usuário e reduzir o atrito, o Chrome está padronizando a forma como lida com os links. Antes, o comportamento era inconsistente entre as plataformas. Os dispositivos móveis geralmente priorizavam o lançamento de apps instalados, enquanto os navegadores para computador primeiro abriam um link em uma guia antes de sinalizar que um app poderia processá-lo.
A nova abordagem unificada para captura de navegação abre automaticamente os links no PWA instalado correspondente. Os links só vão voltar para uma guia do navegador se o PWA não estiver instalado ou se o usuário tiver desativado a opção. Esse novo comportamento está disponível no Chrome 139 para Windows, Mac e Linux. O suporte para ChromeOS será lançado em uma versão futura.
O processo de gerenciamento de navegação
A captura de navegação faz parte do processo de gerenciamento de navegação. Esse processo abrange todo o fluxo, desde a ação inicial do usuário até as decisões do navegador e os comportamentos resultantes configurados pelo desenvolvedor:
- Ações do usuário:inclui interações como clicar ou tocar em links.
- Decisões do navegador:incluem tarefas e decisões gerenciadas pelo navegador, como comportamentos padrão, como captura de navegação.
- Controles do desenvolvedor:incluem APIs da Web que permitem aos desenvolvedores instruir o navegador sobre como lidar com tarefas específicas.
A interação desses elementos determina se o PWA é aberto em uma janela independente ou em uma guia do navegador.
Um caso de uso fundamental do gerenciamento de navegação é quando um usuário clica ou toca em um link para o PWA instalado em outra página do navegador. O exemplo a seguir mostra o caso de um usuário que instalou o PWA do Google Chat e clicou em um link para ele em um convite do Google Agenda.
calendar.google.com.Ações do usuário
Toda ação do usuário consiste em três elementos principais: o evento (como um clique ou toque), a superfície em que ele ocorre (como uma página da Web ou um atalho da área de trabalho) e o tipo de link ativado (como um URL HTTPS). Por exemplo, a ação de um usuário pode ser clicar em um link para
https://chat.google.com/meeting_room_id no escopo do PWA do Google Chat
em uma página da Web em calendar.google.com.
Decisões do navegador
Após uma ação do usuário, como clicar na etapa anterior, o navegador executa o processo de captura de navegação para decidir se os links devem ser abertos em uma guia do navegador ou em um PWA instalado. Ele consiste nas seguintes etapas:
- Determine se a navegação é capturável: em geral, uma navegação é considerada capturável se ela cria um novo frame e não é aberta em um contexto de navegação auxiliar.
- Identificar um PWA de controle: se a navegação puder ser capturada, o navegador tentará encontrar um PWA que "controle" o URL (está dentro do escopo definido no manifesto do app da Web).
- Verificar a preferência do usuário: se um PWA de controle for encontrado, o navegador vai verificar a preferência do usuário. Se o usuário não tiver desativado a opção nas configurações do app, o PWA será iniciado. Caso contrário, o link será aberto em uma nova guia do navegador.
- Inicie o PWA: o navegador inicia o PWA usando o algoritmo de processamento de inicialização. Você pode influenciar isso usando a API Launch Handler, que será abordada a seguir.
O diagrama a seguir resume esse processo:
Controles para desenvolvedores
Embora o processo de navegação dependa principalmente dos padrões do navegador e das configurações do usuário, você pode usar várias APIs para gerenciar aspectos específicos dele. Após a atualização recente de captura de navegação, algumas APIs da Web de longa data se tornaram mais relevantes.
API Launch Handler
Essa API entra em ação quando o navegador decide iniciar o PWA, permitindo que você controle como ele é iniciado, por exemplo, em uma janela nova ou existente.
Defina como o PWA é iniciado usando o membro launch_handler no manifesto do app da Web, que inclui um subcampo chamado client_mode. Esse subcampo determina se uma janela nova ou existente deve ser usada e se ela precisa navegar. Os valores permitidos para client_mode são:
focus-existing: para processar o link em uma janela de app aberta, como um PWA que já está sendo executado no modo independente.navigate-existing: nessa opção, o contexto de navegação mais recente em uma janela de app da Web é direcionado para o URL de destino do lançamento.navigate-new: com essa opção, um novo contexto de navegação é criado em uma janela de app da Web para carregar o URL de destino do lançamento.
Use o launchQueue API para fornecer parâmetros adicionais e processar casos especiais.
A API Launch Handler está disponível no Chrome 110, mas fica muito mais
útil com a atualização de captura de navegação. Saiba mais na
documentação da API Launch Handler.
Outras APIs relacionadas
Além do processamento de inicialização, outras APIs também podem desempenhar um papel nesse processo,
dependendo das necessidades específicas do seu app. Isso inclui os
gerenciadores de protocolos de URL,
que permitem que um web app registre a capacidade de processar esquemas de URL além dos
padrões http e https (por exemplo, protocolos padrão como mailto: ou
personalizados como web+music). Além disso, a
API Web App Scope Extensions (atualmente
em desenvolvimento) permite estender o escopo do seu PWA para capturar links de
outras origens, incluindo subdomínios. Assim, quando um usuário clica em um link de
uma origem associada, o PWA pode ser iniciado. Abordar esses temas em profundidade está fora do escopo deste artigo, mas você pode conferir os links correspondentes para saber mais.
Caso de uso: captura de links do Google Chat no PWA do Chat
Para concluir, saiba como as diferentes partes funcionam juntas no exemplo de clicar em um link do Google Agenda para uma sala do Google Chat, para um usuário que já instalou o PWA do Google Chat.
Antes da captura de navegação
No vídeo a seguir, um usuário cria uma reunião do Google Agenda e convida três convidados. O app Agenda gera automaticamente um link do Google Chat que inclui todos os participantes. Quando o usuário clica nesse link, a sala de chat é aberta em uma nova guia do navegador. Um ícone na barra de endereço indica que um PWA correspondente está instalado, mas exige que o usuário o inicie manualmente. Este era o comportamento antes da atualização de captura de navegação:
Após a captura de navegação
O vídeo a seguir mostra o mesmo fluxo de trabalho do usuário, mas agora com o novo comportamento de captura de navegação. Nesta versão, clicar no link do Google Chat no Google Agenda abre a sala de chat correspondente diretamente no PWA instalado. Além disso, a equipe do Google Chat implementou o processamento de inicialização
ao adicionar um atributo launch_handler ao manifesto do app da Web. Ao definir o
client_mode como focus-existing, eles garantem que o link seja aberto em uma
instância existente do PWA, se uma já estiver em execução. Ao remover a latência
envolvida na abertura de uma nova guia do navegador e no acionamento do carregamento de uma página, o
"tempo até a interatividade do usuário" efetivo pode ser, por design, mais rápido. Na verdade, o Google Chat melhorou significativamente a latência de navegação ao remover a necessidade de iniciar um novo app.
Conclusão e próximas etapas
Este artigo abordou o novo comportamento padrão de captura de navegação disponível no Chrome 139, com foco em um caso de uso comum de um usuário clicando em um link HTTPS no escopo de um PWA instalado. Para mais informações e casos de uso, consulte Gerenciamento de navegação em PWAs instaladas. O diagrama a seguir mostra o detalhamento completo dos casos de uso, incluindo eventos do usuário, plataformas e protocolos, com os resultados correspondentes:
O gerenciamento de navegação é um aspecto crucial, mas muitas vezes ignorado, da UX do app, já que controla o ponto de entrada dele. Os recursos e links abordados neste artigo podem ajudar você a alcançar a melhor experiência possível semelhante a um app para seu PWA.