Visão geral das guias personalizadas do Android

As guias personalizadas são um recurso nos navegadores Android que oferece aos desenvolvedores uma maneira de adicionar uma experiência de navegador personalizada diretamente no app.

O carregamento de conteúdo da Web faz parte dos apps para dispositivos móveis desde os primeiros dias dos smartphones, mas as opções mais antigas podem apresentar desafios para os desenvolvedores. O lançamento do navegador real é uma mudança de contexto pesada para usuários que não é personalizável, enquanto as WebViews não oferecem suporte a todos os recursos da plataforma da Web, não compartilham o estado com o navegador e adicionam sobrecarga de manutenção.

As guias personalizadas permitem que os usuários permaneçam no app enquanto navegam, aumentando o engajamento e reduzindo o risco de abandono. Elas fazem isso sendo alimentadas diretamente pelo navegador preferido do usuário e compartilham automaticamente o estado e os recursos oferecidos por ele. Não é necessário escrever um código personalizado para gerenciar solicitações, permissões ou armazenamentos de cookies.

O que as guias personalizadas podem fazer?

Ao usar uma guia personalizada, o conteúdo da Web é carregado em qualquer mecanismo de renderização que alimente o navegador preferido do usuário. Qualquer recurso de API ou plataforma da Web está disponível lá e na sua guia personalizada. A sessão de navegação, as senhas salvas, as formas de pagamento e os endereços aparecem exatamente como eles já estão acostumados.

O que posso personalizar em uma guia personalizada?

Bastante! As guias personalizadas oferecem controle detalhado sobre grande parte do navegador e da experiência do usuário. No app, você inicia uma guia personalizada usando uma intent. Quando essa intent é chamada, é possível adicionar vários atributos à CustomTabIntent para ter a experiência exata que você quer. Veja a seguir algumas personalizações que podem ser adicionadas:

  • Animações de entrada e saída personalizadas para combinar com o restante do app
  • Modificar a cor da barra de ferramentas para combinar com a marca do app
  • Consistência de cores que pode permanecer no app, mesmo que os usuários alternem entre temas claros e escuros
  • Ações e entradas personalizadas na barra de ferramentas e nos menus do navegador
  • Controle a altura de abertura da guia "Personalizada", permitindo ações como streaming de vídeos enquanto interage com sua loja on-line

Além disso, os usuários podem minimizar uma guia personalizada para interagir com o app e restaurá-la a qualquer momento sem perder o progresso para retomar a jornada. Isso oferece aos usuários uma alternativa para fechar a guia personalizada, e eles podem realizar várias tarefas entre a Web e o app nativo. O recurso é ativado por padrão para as guias personalizadas.

Isso está longe de ser tudo. As Custom Tabs são muito eficientes e estão em desenvolvimento ativo. Cada navegador precisa adicionar suporte para esses recursos à medida que eles são disponibilizados. Embora quase todos tenham algum nível de suporte, é importante saber o que pode ou não estar disponível nos navegadores do usuário. Consulte a tabela de comparação de recursos para conferir rapidamente a disponibilidade dos diferentes recursos nos navegadores Android mais usados.

Você pode testar isso agora com nosso exemplo no GitHub.

Quando devo usar as guias personalizadas?

Não existe uma única maneira "correta" de carregar conteúdo da Web. Em determinadas situações, a WebView será a tecnologia certa a ser usada. Por exemplo, se você estiver hospedando exclusivamente seu próprio conteúdo no app ou se precisar injetar JavaScript diretamente dele. Se o app direcionar as pessoas para URLs fora de domínios, o estado compartilhado integrado nas guias personalizadas significa que elas são provavelmente uma escolha melhor. Outras vantagens das guias personalizadas incluem:

  1. Segurança: as Custom Tabs usam a Navegação segura do Google para proteger o usuário e o dispositivo contra sites perigosos.
  2. Otimização de desempenho:
    1. Pré-aquecimento do navegador em segundo plano, evitando o roubo de recursos do aplicativo.
    2. Acelere o tempo de carregamento da página carregando URLs antecipadamente.
  3. Gerenciamento do ciclo de vida: os apps que iniciam uma guia personalizada não são removidos pelo sistema durante o uso das guias. A importância é aumentada para o nível "primeiro plano".
  4. Modelo de permissões e cookie compartilhado para que os usuários não precisem fazer login em sites com os quais já estão conectados ou conceder novamente as permissões que já concederam.
  5. Os recursos do navegador, como o preenchimento automático para melhor preenchimento de formulários, estão disponíveis de forma nativa.
  6. Os usuários podem retornar ao app com um botão de retorno integrado.

Guias personalizadas x Atividade Confiável na Web

As atividades confiáveis na Web estendem o protocolo das guias personalizadas e compartilham a maioria dos benefícios. No entanto, em vez de fornecer uma interface personalizada, ele permite que os desenvolvedores abram uma guia do navegador sem nenhuma interface. É recomendado para desenvolvedores que querem abrir o próprio App Web Progressivo em tela cheia no próprio app Android.

Onde as guias personalizadas estão disponíveis?

As guias personalizadas são um recurso aceito pelos navegadores na plataforma Android. Ela foi originalmente introduzida pelo Chrome, na versão 45. A maioria dos navegadores Android oferece suporte ao protocolo.

Estamos procurando feedback, perguntas e sugestões sobre esse projeto. Por isso, recomendamos que você registre problemas em crbug.com e faça perguntas no Twitter @ChromiumDev.

Primeiros passos

Além da demonstração do GitHub, há vários guias para você começar a usar as guias personalizadas.

Em caso de dúvidas, confira a tag chrome-custom-tabs no StackOverflow.