Navegação no app usando a Web incorporada

Os navegadores no app oferecem aos usuários uma experiência completa da Web sem que eles precisem sair do seu app. O Android oferece duas APIs principais para implementar navegadores no app: Guias personalizadas e WebViews. Use um navegador no app quando tiver um link ou anúncio que leve a uma página da Web. Você pode abrir essa página diretamente no seu app, como mostrado na Figura 1.

Um link no app em uma caixa vermelha e uma seta apontando para outra tela mostrando o link aberto com uma guia personalizada.
Figura 1. Clicar em um link no app (à esquerda) e abrir um navegador no app usando uma guia personalizada (à direita).

Escolher entre Guias personalizadas e WebViews é uma grande decisão arquitetônica que afeta a velocidade de desenvolvimento, a experiência do usuário e o controle que você tem sobre a interface.

Comparação rápida

Use a tabela a seguir para decidir qual ferramenta atende às suas necessidades:

Recurso WebView Guias personalizadas
Caso de uso principal Criar apps híbridos com a Web como conteúdo principal ou de suporte, exibir anúncios, campanhas no app ou páginas de termos de serviço. Exibir conteúdo de sites externos (como artigos de notícias ou páginas de produtos).
Controle da interface Completo. É um componente View que pode ser colocado em qualquer lugar. Você controla toda a interface ao redor. Limitado. Você pode definir o tema da cor da barra de ferramentas e adicionar algumas ações personalizadas.
Dados e sessões Em sandbox. Não compartilha cookies ou logins com o navegador principal do usuário. Compartilhado. Usa a sessão do navegador padrão do usuário, incluindo cookies e senhas salvas.
Ponte nativa <-> Web Sim. Você pode usar uma ponte JavaScript para comunicação bidirecional e profunda entre o conteúdo da Web e o código nativo do app. Limitado. Você pode usar o método window.postMessage() para transmitir strings básicas.
Esforço do desenvolvedor Alto. Você precisa gerenciar o ciclo de vida, a navegação e a performance. Baixo. É possível implementar com apenas algumas linhas de código.

WebView

Uma WebView é uma visualização que torna as páginas da Web parte integrante do layout do seu app. Ela é eficiente, mas um pouco mais complexa de processar em comparação com as Guias personalizadas.

A WebView pode carregar conteúdo da Web remoto ou local, executar JavaScript e ativar a comunicação bidirecional entre o conteúdo da Web e o código nativo do app. Para saber mais sobre os recursos, consulte O que a WebView pode fazer.

Você também pode usar a WebView para veicular um aplicativo da Web ou mostrar uma página da Web on-line como parte do seu app. Por exemplo, um contrato de usuário final que você precisa atualizar periodicamente. Para saber mais, consulte Criar apps da Web na WebView.

Por que escolher a WebView

Confira a seguir alguns cenários em que a WebView é uma boa opção:

  • Apps híbridos: você está criando um app em que o conteúdo da Web e os componentes nativos (como uma barra de navegação ou um botão de ação flutuante) ficam lado a lado.
  • Conteúdo próprio:o conteúdo da Web é uma parte interativa e essencial da experiência do app, como um editor de documentos ou uma tela de design.
  • Controle total da interface: você precisa modificar o conteúdo da página da Web ou sobrepor elementos de interface nativos.
  • Análise detalhada: você precisa de insights detalhados sobre o envolvimento e a atividade do usuário na visualização da Web.

Principais compensações

Confira a seguir algumas compensações importantes a serem consideradas ao usar a WebView:

  • Performance:a WebView pode consumir muita memória. Se você não gerenciar com cuidado, poderá ter problemas de performance ou ANRs (erros de "O app não está respondendo" ).
  • Segurança e manutenção: você é responsável por reforçar a segurança e gerenciar o ciclo de vida. No entanto, as atualizações da WebView são lançadas globalmente pelo Google Play, então você não precisa se preocupar com a desatualização do mecanismo subjacente.

Guias personalizadas

As Guias personalizadas são uma ótima opção para direcionar os usuários a URLs externos, já que elas oferecem uma janela de navegador rápida, segura e fácil de usar que desliza sobre o app.

Por que escolher as Guias personalizadas

Confira a seguir alguns cenários em que as Guias personalizadas são uma boa opção:

  • Links externos: quando um usuário toca em um link para um site que não é seu, as Guias personalizadas mantêm o contexto do app, oferecendo uma experiência completa do navegador.
  • Facilidade de integração: é a maneira mais simples de colocar uma experiência da Web incorporada em funcionamento.
  • Estado compartilhado: como compartilha cookies com o navegador padrão do usuário, os usuários não precisam fazer login novamente em sites que já visitaram.
  • Login de terceiros: elas são adequadas para fluxos de login de terceiros (como "Fazer login com o Google" ou "Fazer login com o Facebook"), já que o navegador processa as credenciais com segurança.

Embora a maioria dos navegadores seja compatível com as Guias personalizadas, alguns oferecem mais personalização do que outros. Para mais informações, consulte Compatibilidade do navegador.

Usar conteúdo da Web no Jetpack Compose

Você pode usar as Guias personalizadas e a WebView ao criar com o Jetpack Compose:

  • Guias personalizadas: como as Guias personalizadas usam uma Intent, você pode iniciá-las em qualquer Context nas funções do Compose, o que permite uma integração perfeita.
  • WebView: o Compose ainda não tem um elemento combinável nativo da WebView. Portanto, você precisa usar AndroidView para incorporar uma WebView padrão ao layout.

Outros recursos

Para desenvolver páginas da Web para dispositivos com tecnologia Android usando as APIs WebView ou Guias personalizadas, consulte os documentos a seguir: