Custom Tabs — Uma alternativa ao WebView
Um guia para implementar abas customizadas do Chrome
(apressado) ? demo :Uma tarefa muito comum em aplicativos é a abertura de páginas web para apresentar conteúdos complementares. Para isto, nós desenvolvedores possuíamos duas opções:
- acessar a URL através do browser, consequentemente desviando o usuário para o aplicativo Chrome, por exemplo;
- utilizar um WebView inserido no layout do aplicativo.
A segunda opção, na maioria dos casos, mostrava-se mais interessante no sentido que ela não atrapalhava o fluxo de navegação do usuário, uma vez que a informação requisitante era apresentada no próprio contexto da aplicação.
Entretanto, como tudo não são flores, os dois métodos sofrem do mesmo problema:
Lentidão.
Você pode pensar que abrir o Chrome e esperar carregar a página é mais lento do que realizar a mesma tarefa com WebViews, entretanto esta não é a realidade.
WebViews são lentos e, apesar da enorme melhora com o Android 4.4 e 5.0, o componente Custom Tabs veio para suprir todas as fraquezas desta view.
Afinal o que são Custom Tabs?
Custom Tabs não são abas customizadas do nosso já conhecido TabLayout, abordado em um post passado, mas sim uma nova funcionalidade presente nas versões recentes do Chrome que possibilita uma transição rápida e intuitiva entre a aplicação e uma página web. Bom, como uma imagem vale mais do que mil palavras, segue um gif ilustrando as vantagens da utilização do Custom Tabs.
Como é possível perceber, além de apresentar um tempo de carregamento muito baixo, possível graças ao pré-carregamento das páginas web em background, ainda é possível customizar a tab do Chrome para que esta apresente um estilo parecido com do aplicativo em questão.
Implementação
Vamos ao que interessa, como incluir Custom Tabs no meu aplicativo hoje. Primeiramente, deve-se incluir a biblioteca de suporte:
Logo, basta utilizar um Intent Builder para customizar a aparência da Custom Tab e, finalmente, abrir a url desejada.
O trecho de código acima pode ser utilizado, por exemplo, após o clique de um botão ou link.
Como é possível ver, não há nenhum mistério, entretanto, o Custom Tab disponibiliza diversas outras funções que tornam o seu uso muito mais vantajoso.
Customização
O Intent Builder, utilizado anteriormente, pode ser usado para modificar diversos aspectos da aparência do Custom Tab e, até mesmo, adicionar novas funcionalidades. Para isso, utiliza-se de diversos métodos pertencentes à classe CustomTabsIntent que devem ser utilizados antes do build do intent.
A primeira, e essencial, mudança é a adequação da cor da Toolbar.
Também é possível modificar o ícone do botão de fechar, presente no lado esquerda da Toolbar.
Como dito, além da aparência, pode-se acrescentar novas funcionalidades, como um novo botão à Toolbar. Para isso, adicionamos um novo ícone e associamos o mesmo à uma PendingIntent, que irá executar uma ação após o clique. No exemplo abaixo, apenas redirecionamos o usuário para a mesma página web no Chrome.
Ao invés de um novo ícone, também é possível adicionar um novo item ao menu overflow, já presente na Toolbar.
Por último, mas não menos importante, pode-se definir as animações de entrada e saída da Custom Tab.
Otimizações
Até este ponto, tudo funcionando! Entretanto, para se obter o ganho de performance apresentado na figura comparativa, precisamos realizar algumas otimizações.
Uma das grandes vantagens da utilização da Custom Tab é a sua capacidade de pre-carregar a página web na qual se deseja acessar, minimizando o tempo de espera do usuário.
Esta mágica é alcançada através de um service que, em background, irá realizar o download de todo o conteúdo do site. Para isso, primeiramente, cria-se uma sub-classe da CustomTabsServiceConnection
Esta classe sobrescreve dois métodos, onCustomTabsServiceConnected e onServiceDisconnected. Durante a execução do primeiro que é indicado a URL que deverá pré-carregada. Para isto é necessário realizar três operações:
- “warmup” do cliente, que irá, literalmente, “esquentar” o browser (OBS: a documentação realmente apresenta esta definição);
- criar uma sessão;
- indicar qual URL deve ser pré-carregada, através do método mayLaunchUrl do objeto da sessão recém instanciado.
Criada esta classe, durante o processo de criação de uma Activity ou Fragment do app instanciamos um objeto MainCustomTabsService e chamamos o método bindService, que irá realizar o “bind” entre o contexto atual e o serviço.
Muito importante realizar o “unbind” do service quando a Activity/Fragment forem destruídos, de forma a evitar Memory Leaks.
Realizando todo este processo, obtêm-se um carregamento extremamente otimizado de suas páginas web e, ao mesmo tempo mantendo a identidade visual do seu aplicativo.
