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 app. O Android oferece duas APIs principais para implementar navegadores no app: Custom Tabs e WebViews. Use um navegador no app quando você tiver um link ou um anúncio que leve a uma página da Web. É possível abrir essa página diretamente no 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, veicular anúncios, campanhas no app ou páginas de Termos de Serviço. Mostrar 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 a cor da barra de ferramentas e adicionar algumas ações personalizadas.
Dados e sessões Em sandbox. Ele não compartilha cookies nem logins com o navegador principal do usuário. Compartilhada. Ele usa a sessão padrão do navegador 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 conteúdo da Web e código de app nativo. Limitado Você pode usar o método window.postMessage() para transmissão básica de strings.
Esforço do desenvolvedor Alta. Você precisa gerenciar o ciclo de vida, a navegação e a performance por conta própria. Baixa. É 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. Ele é eficiente, mas um pouco mais complexo de lidar em comparação com as guias personalizadas.

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

Você também pode usar a WebView para fornecer 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 precisa ser atualizado periodicamente. Para saber mais, consulte Criar apps da Web no WebView.

Por que escolher a WebView

Confira 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:seu 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:é necessário modificar o conteúdo da página da Web ou sobrepor elementos nativos da interface.
  • Análises detalhadas:você precisa de insights detalhados sobre o engajamento e a atividade do usuário na visualização da Web.

Principais vantagens e desvantagens

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

  • Performance:o WebView pode consumir muita memória. Se você não gerenciar isso com cuidado, poderá ter problemas de desempenho ou ANRs (erros de aplicativo não 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 fornecem uma janela de navegador rápida, segura e fácil de usar que desliza sobre o app.

Por que escolher guias personalizadas

Confira 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 e oferecem uma experiência completa de navegador.
  • Facilidade de integração:é a maneira mais simples de criar e executar uma experiência da Web incorporada.
  • Estado compartilhado:como ele compartilha cookies com o navegador padrão do usuário, não é necessário fazer login novamente em sites já visitados.
  • Login de terceiros:são adequados 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 opções de personalização do que outros. Para mais informações, consulte Suporte a navegadores.

Usar conteúdo da Web no Jetpack Compose

É possível usar guias personalizadas e WebView ao criar com o Jetpack Compose:

  • Guias personalizadas:como as guias personalizadas usam um Intent, é possível 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 WebView nativo. Por isso, você precisa usar AndroidView para incorporar uma WebView padrão ao seu layout.

Outros recursos

Para desenvolver páginas da Web para dispositivos com tecnologia Android usando WebViews ou APIs de guias personalizadas, consulte os seguintes documentos: