Usar conteúdo da Web no app Android

O Android permite aproveitar o poder da Web nos seus apps. Assim, você pode aproveitar a flexibilidade e a eficiência de exibir determinados tipos de conteúdo.

Isso permite integrar conteúdo da Web ao app Android sem problemas, como exibir um feed de notícias, mostrar tutoriais interativos, veicular anúncios ou até mesmo hospedar um minijogo sem precisar criar tudo do zero. Pense nisso como uma janela para a Internet dentro do seu app. Há duas maneiras de incorporar conteúdo da Web no seu app:

  • WebView: mostra o conteúdo da Web que você controla inline onde quer um alto grau de flexibilidade na personalização ou atualização da interface.
  • Custom Tabs: uma experiência completa de navegação no app com tecnologia do navegador padrão do usuário (confira o suporte a navegadores) para quando os usuários clicam em um link e você quer que eles permaneçam no app, em vez de sair para um navegador externo, com grande parte da experiência de navegação pronta para uso.
App Android aberto no Google Play, com a visualização da Web principal destacada. Guia personalizada aberta na página da Web do Android para desenvolvedores, destacada.
Figura 1. `WebView` (à esquerda) e `Custom Tab` (à direita) em destaque.

Por que incorporar conteúdo da Web?

Há vários benefícios em incorporar conteúdo da Web no seu app:

  • Eficiência: reutilize o código existente do seu site. Crie com base em tecnologias e conteúdo da Web.
  • Integração: use conteúdo externo de provedores terceirizados, como mídia e anúncios, no seu app.
  • Flexibilidade: atualize o conteúdo de forma dinâmica sem ficar restrito a interfaces predefinidas ou sem lançar atualizações de apps.

Quando usar conteúdo da Web?

Há três casos de uso principais para usar a Web no seu app Android:

1. Incorporar conteúdo da Web ao app como conteúdo principal ou de suporte: use WebView

  • Mostre seu próprio conteúdo da Web inline como uma experiência principal quando quiser um alto grau de flexibilidade na personalização ou atualização da interface.
  • Mostrar outros conteúdos, como anúncios, termos e regulamentações legais ou outros conteúdos de terceiros inline ou como uma janela na experiência do app.
App Android aberto no Google Play, com a visualização da Web principal destacada em uma caixa vermelha App Android aberto com texto de suporte dentro de uma caixa vermelha.
Figura 2. Conteúdo da Web incorporado ao app com `WebView`s como conteúdo principal (esquerda) e de suporte (direita).

2. Navegação no app usando Custom Tabs ou WebView para casos de uso mais avançados

  • Tenha uma experiência completa de navegação no app para quando os usuários clicarem em um link e você quiser mantê-los no app, em vez de sair para um navegador externo.
    • Observação: para dispositivos de tela grande, como tablets e dobráveis, há outras opções para ajudar os apps a aproveitar o espaço extra:
    • Os apps podem abrir weblinks em tela dividida usando iniciar uma experiência adjacente de várias janelas. Isso permite que os usuários façam várias tarefas ao mesmo tempo entre seu app e um navegador. OU
    • Custom Tabs tem uma opção de painel lateral que pode ser aberta na mesma tarefa, mas ao lado do conteúdo do app atual.
  • O Custom Tab é alimentado pelo navegador padrão do usuário, para navegadores que são compatíveis com Custom Tabs.
    • Embora seja possível usar um WebView e oferecer uma experiência de navegação no app altamente personalizável, recomendamos o Custom Tabs para uma experiência de navegador pronta para uso e uma transição perfeita quando um usuário quiser abrir um link da Web no navegador.
Página da Web com um link no app em uma caixa vermelha à esquerda e um navegador no app mostrado à direita.
Figura 3. Clicar em um link no app (esquerda) e abrir um navegador no app (direita).

3. Fluxos de login ou autenticação no app

A abordagem sugerida do Android é criar fluxos de login ou autenticação usando o Gerenciador de credenciais. Se você ainda precisar usar a Web incorporada para essas experiências, siga estas orientações:

  • Alguns apps usam WebViews para fornecer fluxos de login aos usuários, incluindo o uso de um nome de usuário e uma chave de acesso (ou senha) específicos do app. Isso permite que os desenvolvedores unifiquem os fluxos de autenticação em várias plataformas.
  • Ao vincular a um provedor de identidade ou experiência de login de terceiros, como "Fazer login com…", use Custom Tabs. Iniciar um Custom Tab ajuda a proteger a credencial do usuário, mantendo-a isolada no site de terceiros.

Para mais informações sobre como usar WebViews para autenticação, consulte Autenticar usuários com WebView. Para iniciar uma Custom Tab, consulte Visão geral das guias personalizadas do Android.

Campo de login no app com WebView à esquerda. Um login de terceiros com a guia personalizada à direita.
Figura 4. Um campo de login no app (à esquerda) e um login de terceiros aberto em uma `guia personalizada` (à direita).