Tabs personalizados Chrome

BY admin
|

o que são Tabs personalizados Chrome? #

os desenvolvedores de aplicativos enfrentam uma escolha quando um usuário tapa um URL para tanto lançar um navegador, ou construir seu próprio navegador de aplicativos usando WebViews.

ambas as opções apresentam desafios-o lançamento do navegador é um interruptor de contexto pesado que não é personalizável, enquanto WebViews não compartilham estado com o navegador e adicionar despesas de manutenção.

Chrome Custom Tabs give apps more control over their web experience, and make transitions between native and web content more seamless without have to resort to a WebView.

as páginas personalizadas cromadas permitem a uma aplicação personalizar a aparência e a sensação do Chrome. Um aplicativo pode mudar coisas como:

  • cor da barra de ferramentas
  • Indique e saia animações
  • adicione acções personalizadas à barra de ferramentas cromadas, ao menu estouro e à barra inferior

páginas personalizadas cromadas também permitem ao programador iniciar previamente o conteúdo cromado e pré-obtenção para um carregamento mais rápido.

pode testar isto agora com a nossa amostra no Github.

quando devo utilizar páginas personalizadas cromadas vs WebView? #

a WebView é uma boa solução se você estiver hospedando seu próprio conteúdo dentro de sua aplicação. Se o seu aplicativo direciona as pessoas para URLs fora do seu domínio, recomendamos que use páginas personalizadas Chrome por estas razões:

  • simples de implementar. Não há necessidade de construir código para gerenciar pedidos, bolsas de permissão ou lojas de cookies.

  • personalização da interface:

    • cor da barra de ferramentas
    • botão de Acção
    • itens do menu personalizado
    • animações personalizadas para / para fora
    • barra de ferramentas inferior

  • consciência de navegação: o navegador faz uma chamada de volta para a aplicação em cima de uma navegação externa.

  • segurança: o navegador usa a navegação segura do Google para proteger o Usuário e o dispositivo de sites perigosos.

  • otimização do desempenho:

    • pré-aquecimento do navegador em segundo plano, evitando roubar recursos da aplicação.
    • fornecendo uma URL provável antes do navegador, que pode realizar trabalho especulativo, acelerando o tempo de carga de página.

  • gestão do ciclo de vida: o browser impede que a aplicação seja despejada pelo sistema, aumentando a sua importância para o Nível “primeiro plano”.

  • jar de cookies compartilhado e modelo de permissões para que os usuários não tenham que entrar em sites a que já estão conectados, ou re-conceder permissões que eles já concederam.

  • se o usuário tiver ligado o protetor de dados, eles ainda se beneficiarão dele.

  • completar automaticamente sincronizado através de dispositivos para melhor completar a forma.

  • modelo de personalização simples.

  • retorne rapidamente ao aplicativo com um único toque.

  • deseja usar as últimas implementações do navegador nos dispositivos pré-Chupa-Chupa (auto updating WebView) em vez das WebViews mais antigas.

quando estará disponível? #

As of Chrome 45, Chrome Custom Tabs is now generally available to all users of Chrome, on all of Chrome supported Android versions (Jellybean onwards).

estamos à procura de feedback, perguntas e sugestões sobre este projecto, por isso encorajamo-lo a arquivar questões sobre crbug.com e fazer perguntas à nossa conta no Twitter @ChromiumDev.

Guia de Aplicação #

um exemplo completo está disponível em https://github.com/GoogleChrome/custom-tabs-client. Ele contém classes reutilizáveis para personalizar a UI, conectar-se ao serviço de fundo, e lidar com o ciclo de vida da aplicação e da atividade tabulação personalizada.

se você seguir a orientação desta página, você será capaz de criar uma grande integração.

o primeiro passo para uma integração de páginas personalizadas é adicionar a biblioteca de Suporte de páginas personalizadas ao seu projecto. Abra o seu ficheiro build.gradle e adicione a biblioteca de suporte à secção de dependências.

dependencies {
...
compile 'com.android.support:customtabs:23.3.0'
}

uma vez que a biblioteca de suporte é adicionada ao seu projecto, existem dois conjuntos de possíveis personalizações:

  • personalizar a IU e a interacção com as abas personalizadas.
  • tornando a carga da Página mais rápida, e mantendo a aplicação viva.

as personalizações da IU são feitas usando as classes CustomTabsIntent e CustomTabsIntent.Builder; as melhorias de desempenho são conseguidas usando o CustomTabsClient para se conectar ao Serviço de páginas personalizadas, o Chrome de aquecimento e deixá-lo saber quais urls serão abertas.

abrir uma página personalizada cromada #

configurar a cor da barra de endereços #

um dos aspectos mais importantes (e mais simples de implementar) das páginas personalizadas cromadas é a capacidade de alterar a cor da barra de endereços para ser consistente com o tema da sua aplicação.

// Changes the background color for the omnibox. colorInt is an int
// that specifies a Color.
builder.setToolbarColor(colorInt);

Configure um botão de acção personalizado#

como desenvolvedor do seu aplicativo, você tem o controle total sobre o botão de ação que é apresentado aos seus usuários dentro da página Chrome.

na maioria dos casos, esta será uma ação primária, como Share, ou outra atividade comum que seus usuários irão realizar.

o botão de Acção é representado como um pacote com um ícone do botão de acção e um pendingIntent que será chamado pelo Chrome quando o Utilizador carregar no botão de Acção. O ícone é atualmente 24dp em altura e 24-48 dp em largura.

Configure um menu personalizado#

o navegador Chrome tem um menu abrangente de ações que os usuários irão executar com frequência dentro de um navegador, no entanto eles podem não ser relevantes para o contexto da sua aplicação.

como programador, poderá adicionar e personalizar até cinco itens do menu que irão aparecer entre a linha de ícones e os itens do pé.

o item do menu é adicionado chamando CustomTabsIntent.Builder#addMenuItem com o Título e um pendingIntent que o Chrome irá chamar em seu nome quando o usuário tapar o item são passados como parâmetros.

builder.addMenuItem(menuItemTitle, menuItemPendingIntent);

Configure personal enter and exit animations #

muitos aplicativos Android usam imagens personalizadas de entrada e saída de animações quando a transição entre atividades no Android. As páginas personalizadas Chrome não são diferentes, você pode alterar as animações de entrada e saída (quando o usuário pressiona para trás) para mantê-las consistentes com o resto de sua aplicação.

aquecer o cromo para fazer com que as páginas carreguem mais rápido #

por padrão, quando CustomTabsIntent#launchUrl é chamado, ele irá girar o cromo e lançar a URL. Isso pode levar tempo precioso e impacto na percepção da suavidade.

acreditamos que os utilizadores exigem uma experiência quase instantânea, por isso fornecemos um serviço no Chrome ao qual o seu aplicativo pode ligar-se e dizer ao Chrome para aquecer o navegador e os componentes nativos. Também estamos experimentando com a capacidade para você, o desenvolvedor para dizer ao Chrome o conjunto provável de páginas web que o usuário irá visitar. O Chrome será então capaz de executar:

  • DNS pre-resolution of the main domain
  • DNS pre-resolution of the most likely sub-resources
  • Pre-connection to the destination including HTTPS/TLS negotionation.

o processo de aquecimento do cromato é o seguinte ::

  • Use CustomTabsClient#bindCustomTabsService para se conectar ao serviço.
  • uma vez que o serviço está conectado, ligue para CustomTabsClient#warmup para iniciar o Chrome nos bastidores.
  • peça a CustomTabsClient#newSession para criar uma nova sessão. Esta sessão é usada para todos os pedidos à API.
  • opcionalmente, anexar um CustomTabsCallback como um parâmetro ao criar uma nova sessão, para que você saiba que uma página foi carregada.
  • diga ao Chrome quais as páginas que o utilizador poderá carregar com CustomTabsSession#mayLaunchUrl.
  • Call the CustomTabsIntent.Builder constructor passing the created CustomTabsSession as a parameter.

Connect to the Chrome Service #

the CustomTabsClient#bindCustomTabsService method takes a complexity of connecting to the Custom Tabs service.

crie uma classe que se estende CustomTabsServiceConnection e use onCustomTabsServiceConnected para obter uma instância do CustomTabsClient. Este exemplo será necessário nos próximos passos.

aquecer o processo de navegação #

boolean warmup(long flags)

aquece o processo do navegador e carrega as bibliotecas nativas. O aquecimento é assíncrono, o valor de retorno indica se o pedido foi aceito. Várias chamadas de sucesso também retornarão verdadeiras.O

Devolve true para o sucesso.

crie uma nova página #

boolean newSession(CustomTabsCallback callback)

a sessão é usada em chamadas subsequentes para ligar a chamada mayLaunchUrl, o Personaltabsintent e a página gerada uma para a outra. O callback fornecido aqui está associado com a sessão criada. Todas as atualizações para a sessão criada (veja a chamada de páginas personalizadas abaixo) também são recebidas através desta chamada de volta. Devolve se uma sessão foi criada com sucesso. Várias chamadas com o mesmo CustomTabsCallback ou um valor nulo irá retornar false.

diga ao Chrome qual o URL que é provável que o utilizador abra #

boolean mayLaunchUrl(Uri url, Bundle extras, List otherLikelyBundles)

este método CustomTabsSession diz ao navegador de uma navegação futura provável para um URL. O método warmup() deve ser chamado primeiro como uma melhor prática. A URL mais provável tem que ser especificada primeiro. Opcionalmente, pode ser fornecida uma lista de outros URLs prováveis. São tratados como menos prováveis do que o primeiro, e têm de ser ordenados por ordem decrescente de prioridade. Estes URLs adicionais podem ser ignorados. Todas as chamadas anteriores a este método serão retiradas. Devolve se a operação foi concluída com sucesso.

Personal Tabs Connection Callback #

void onNavigationEvent(int navigationEvent, Bundle extras)

será chamado quando um evento de navegação acontece na página personalizada. O ‘navigationEvent int’ é um dos 6 valores que define o estado da página. Veja abaixo para mais informações.

o que acontece se o utilizador não tiver uma versão recente do Chrome instalada? #

as páginas personalizadas usam uma intenção de ACTION_VIEW com Extras de chaves para personalizar a interface. Isto significa que, por padrão, a página será aberta no navegador do sistema, ou o navegador padrão do Usuário.

se o utilizador tiver o Chrome instalado e for o navegador por omissão, irá automaticamente pegar nos EXTRAS e apresentar uma interface UI personalizada. Também é possível para outro navegador usar os extras de intenção para fornecer uma interface personalizada semelhante.

Como posso verificar se o cromo suporta páginas personalizadas do cromo? #

All versions of Chrome supporting Chrome Custom Tabs expose a service. Para verificar se o Chrome suporta páginas personalizadas, tente ligar-se ao serviço. Se for bem sucedido, então as páginas personalizadas podem ser usadas com segurança.

Best Practices #

Since Chrome Custom Tabs was launched, we’ve seen various implementations with different levels of quality. Esta seção descreve um conjunto de melhores práticas que encontramos para criar uma boa integração.

ligue-se ao Serviço de páginas personalizadas e ligue ao warmup() #

pode poupar até 700 ms ao abrir uma ligação com as páginas personalizadas, ligando-se ao Serviço e ao cromo de pré-carregamento.

ligue-se ao Serviço de páginas personalizadas no método onStart() das actividades a que pretende lançar uma página personalizada. = = Ligações externas = =

a carga acontece como um processo de baixa prioridade, o que significa que não terá qualquer impacto negativo no desempenho em sua aplicação, mas dará um grande impulso de desempenho ao carregar um link.

conteúdo pré-renderizador #

pré-renderização irá tornar o conteúdo externo aberto instantaneamente. Assim, como se seu usuário tem pelo menos uma probabilidade de 50% de clicar no link, ligue para o método mayLaunchUrl ().

chamar mayLaunchUrl () fará com que as páginas personalizadas pré-obtenham a página principal com o conteúdo de suporte e pré-renderização. Isso dará a velocidade máxima até o processo de carregamento de páginas, mas vem com um custo de rede e bateria.

Tabs personalizados é inteligente e sabe se o usuário está usando o telefone em uma rede de medição ou se é um dispositivo de baixo custo e pré-renderização terá um efeito negativo no desempenho geral do dispositivo e não pré-busca ou pré-renderização nesses cenários. Então, não há necessidade de otimizar sua aplicação para esses casos.

fornece um recurso para quando as páginas personalizadas não estão instaladas #

embora as páginas personalizadas estejam disponíveis para a grande maioria dos utilizadores, existem alguns cenários em que um navegador que suporta páginas personalizadas não está instalado no dispositivo ou o dispositivo não suporta uma versão do navegador que tenha páginas personalizadas activadas.

certifique-se de fornecer um recurso que fornece uma boa experiência de usuário, abrindo o navegador padrão ou usando a sua própria implementação WebView.

adicione o seu aplicativo como referrer #

é geralmente muito importante para os sites para rastrear de onde o seu tráfego está vindo. Certifique-se de que lhes diz que está a enviar utilizadores, definindo o referrer ao lançar a sua página personalizada

intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + context.getPackageName()));

adicione animações personalizadas #

as animações personalizadas irão tornar mais suave a transição da sua aplicação para o conteúdo web. Certifique-se de que a animação de acabamento é o reverso da animação de início, pois vai ajudar o usuário a entender que ela está retornando ao conteúdo onde a navegação começou.

escolher um ícone para o botão de Acção #

adicionar um botão de Acção fará com que os utilizadores se envolvam mais com as suas funcionalidades da aplicação. Mas, se não houver um bom ícone para representar a ação que seu botão de ação irá executar, crie um bitmap com um texto descrevendo a ação.

lembre-se que o tamanho máximo para o mapa de bits é de 24dp altura x largura de 48dp.

preparando – se para outros navegadores #

lembre-se que o usuário pode ter mais de um navegador instalado que suporta páginas personalizadas. Se existir mais do que um navegador que suporte páginas personalizadas e nenhuma se estas forem o navegador preferido, pergunte ao Utilizador como é que ela quer abrir a ligação

permite ao utilizador optar por não usar as páginas personalizadas #

adicione uma opção à aplicação para que o utilizador abra as ligações no navegador por omissão em vez de usar uma página personalizada. Isto é especialmente importante se a aplicação abriu o link usando o navegador antes de adicionar suporte para páginas personalizadas.

Let native applications handle the content #

Some URLs can be handled by native applications. Se o usuário tem o aplicativo Twitter instalado e clica em um link para um tweet. Ela espera que o aplicativo do Twitter irá lidar com isso.

Antes de abrir uma url da sua aplicação, verifique se existe uma alternativa nativa e use-a.

Personalize a cor da barra de ferramentas #

Personalize com a cor primária da sua aplicação se quiser que o utilizador sinta que o conteúdo faz parte da sua aplicação.

se quiser deixar claro para o utilizador que ela deixou a sua aplicação, não personalize a cor de todo.

adicione uma acção de partilha #

certifique-se que adiciona a acção de Partilha ao menu de ‘overflow’, dado que os utilizadores esperam ser capazes de partilhar a ligação ao conteúdo que estão a ver na maioria dos casos de utilização, e as páginas personalizadas não adicionam uma por omissão.

Personalize o botão Fechar #

Personalize o botão Fechar para fazer com que a página personalizada sinta que faz parte da sua aplicação.

se quiser que o utilizador se sinta como se as páginas personalizadas fossem uma janela modal, use o botão “X” por omissão. Se quiser que o utilizador sinta que a página personalizada faz parte do fluxo da aplicação, use a seta para trás.

lidar com ligações internas #

ao interceptar cliques em ligações geradas pelo android:autoLink ou sobrepondo cliques em ligações nas páginas web, certifique-se de que a sua aplicação lida com as ligações internas e vamos personalizar as páginas externas.

lidar com vários ‘clicks’ #

se necessitar de efectuar qualquer processamento entre o utilizador que carregue numa ligação e abra a página personalizada, certifique-se que esta é executada em menos de 100ms. caso contrário, as pessoas irão ver a falta de resposta e poderão tentar carregar várias vezes na ligação.

se não for possível evitar o atraso, certifique-se de que a aplicação está preparada para quando um utilizador clica várias vezes no mesmo link e não abre uma página personalizada várias vezes.

API de baixo nível #

embora o método recomendado para integrar a sua aplicação com páginas personalizadas esteja a usar a biblioteca de Suporte de páginas personalizadas, uma implementação de baixo nível também está disponível.

a implementação completa da biblioteca de suporte está disponível no Github e é usado como ponto de partida. Ele também contém os arquivos AIDL necessários para se conectar ao serviço, como os contidos no repositório de crómio não são diretamente utilizáveis com o Android Studio.

Basics for Launching Custom Tabs using the Low Level API #

Adding UI Customisations #

UI Customizations are included by adding Extras to the ACTION_VIEW Intent. Uma lista completa das chaves extras usadas para personalizar a IU pode ser encontrada nos documentos personalizados. Segue-se um exemplo de como adicionar uma cor da barra de ferramentas personalizada:

ligando-se ao Serviço de guias personalizados #

o serviço de guias personalizados pode ser usado da mesma forma que outros serviços Android são. A interface é criada com AIDL e cria automaticamente uma classe de serviço proxy para você.

Use os métodos no serviço proxy para aquecer, criar sessões e pré-obter

ligações úteis #

  • Github Demo
  • Chrome Custom Tabs on StackOverflow

FAQ #

  • quando estará disponível no canal estável?
    • estão disponíveis abas personalizadas cromadas a partir do Chrome 45.
  • Onde posso fazer perguntas?
    • marca Stackoverflow: cromo-personal-tabs