Navegação no app usando a Web incorporada

Os navegadores no app oferecem aos usuários uma experiência completa na Web sem que eles precisem sair do 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 um anúncio que leve a uma página da Web. Você pode 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 de arquitetura 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 de display, campanhas para apps ou páginas de Termos de Serviço. Mostrar conteúdo de sites externos (como notícias ou páginas de produtos).
Controle de interface Full. É um componente View que pode ser colocado em qualquer lugar. Você controla toda a interface ao redor. Limitado. É possível definir a cor da barra de ferramentas e adicionar algumas ações personalizadas.
Dados e sessões Em sandbox. Ele não compartilha cookies ou logins com o navegador principal do usuário. Compartilhado. 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 uma comunicação profunda e bidirecional entre o conteúdo da Web e o código do app nativo. Limitado. Use 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 o desempenho por conta própria. Baixo. É possível implementá-la 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 app. Ele é eficiente, mas um pouco mais complexo de usar em comparação com as guias personalizadas.

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

Também é possível usar o WebView para fornecer um aplicativo da Web ou exibir 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 no WebView.

Por que escolher o WebView

Confira alguns cenários em que o 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 central e interativa da experiência no 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álise detalhada:você precisa de insights detalhados sobre o engajamento do usuário e a atividade na visualização da Web.

Principais vantagens e desvantagens

Veja a seguir algumas vantagens e desvantagens importantes a serem consideradas ao usar o WebView:

  • Desempenho:o WebView pode consumir muita memória. Se você não o gerenciar com cuidado, poderá ter problemas de desempenho ou ANRs (erros de app não respondendo).
  • Segurança e manutenção:você é responsável por reforçar a segurança e gerenciar o ciclo de vida. Isso inclui gerenciar a preservação de estado durante a recriação de processos usando WebViewCompat.saveState() e permanecer dentro do limite de transação de estado salvo de 1 MB do Android. No entanto, as atualizações do WebView são lançadas globalmente pelo Google Play, então você não precisa se preocupar com o mecanismo subjacente ficar desatualizado.

Guias personalizadas

As guias personalizadas são uma ótima opção para direcionar os usuários a URLs externos, porque 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 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 o mantêm no contexto do app, oferecendo uma experiência completa de 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, as pessoas não precisam fazer login novamente nos sites que já visitaram.
  • 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 personalização do que outros. Para mais informações, consulte Suporte 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 um Intent, é possível iniciá-las em qualquer Context nas funções do Compose, o que facilita a integração.
  • WebView:o Compose ainda não tem um elemento combinável WebView nativo. Por isso, é necessário usar AndroidView para incorporar um WebView padrão ao layout.

Outros recursos

Para desenvolver páginas da Web para dispositivos Android usando as APIs WebViews ou Custom Tabs, consulte os seguintes documentos: