As guias personalizadas são um recurso dos navegadores Android que oferecem aos desenvolvedores de apps 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 o surgimento dos smartphones, mas opções mais antigas podem apresentar desafios para os desenvolvedores. A inicialização do navegador real é uma forte chave de contexto para usuários que não é personalizável, enquanto os WebViews não oferecem suporte a todos os recursos da plataforma da Web, não compartilham o estado com o navegador e geram sobrecarga de manutenção.
As guias personalizadas oferecem uma experiência do usuário melhor do que abrir um navegador externo. Elas permitem que os usuários permaneçam no app enquanto navegam, aumentando o engajamento e reduzindo o risco de abandono do app. Isso é feito com a tecnologia direta do navegador preferido do usuário e compartilhando automaticamente o estado e os recursos oferecidos por ele. Não é preciso escrever código personalizado para gerenciar solicitações, concessões de permissões ou armazenamentos de cookies.
O que as guias personalizadas podem fazer?
Ao usar uma guia personalizada, seu conteúdo da Web será carregado em qualquer mecanismo de renderização que funcione no navegador preferido do usuário. Todos os recursos de API ou plataforma da Web estão disponíveis nessa página e podem ser acessados na guia "Personalizada". A sessão de navegação, as senhas salvas, as formas de pagamento e os endereços serão mostrados como de costume.
O que posso personalizar em uma Guia personalizada?
Bastante! As guias personalizadas oferecem controle refinado sobre grande parte do navegador Chrome e da experiência do usuário. No app, você inicia uma guia personalizada usando uma intent. Quando essa intent é chamada, você pode adicionar vários atributos à CustomTabIntent para ter a experiência exata que quer. Algumas personalizações que você pode adicionar estão listadas aqui.
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 seu app.
Tenha consistência de cores que pode permanecer no app, mesmo que eles alternem entre temas claros e escuros.
Ações e entradas personalizadas na barra de ferramentas e nos menus do navegador.
Controle a altura de inicialização da guia "Personalizada" e ative o streaming de vídeos durante a interação com a loja on-line, por exemplo.
Os usuários podem minimizar a guia personalizada para interagir com o app e restaurá-la a qualquer momento sem perder o progresso e retomar a jornada. Isso oferece aos usuários uma alternativa para fechar a guia personalizada e podem realizar várias tarefas facilmente entre a Web e o app nativo. O recurso é ativado por padrão para guias personalizadas a partir do Chrome 122 Beta.
Isso está longe de tudo. As guias personalizadas são muito poderosas e estão em desenvolvimento ativo. Cada navegador precisa adicionar suporte para esses recursos à medida que eles se tornam disponíveis. 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 verificar rapidamente a disponibilidade de diferentes recursos nos navegadores Android mais usados.
Teste isso agora com nosso exemplo (link em inglês) 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 seu app ou se precisar injetar JavaScript diretamente nele. Se o app direcionar as pessoas para URLs fora dos domínios, o estado compartilhado integrado nas guias personalizadas significa que essas provavelmente são uma escolha melhor. Outros pontos fortes das Guias personalizadas incluem:
- Segurança: as guias personalizadas usam a Navegação segura do Google para proteger o usuário e o dispositivo contra sites perigosos.
- Otimização de desempenho:
- Pré-aquecimento do navegador em segundo plano, evitando o roubo de recursos do aplicativo.
- Acelere o tempo de carregamento da página carregando URLs de forma especulativa com antecedência.
- 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 é elevada para o nível "primeiro plano".
- Modelo de permissões e jar de cookie compartilhado para que os usuários não precisem fazer login em sites a que já estão conectados nem concedam permissões já concedidas.
- Se ativados, os recursos do navegador, como a Economia de dados, são compartilhados, carregando conteúdo de maneira mais rápida e barata.
- O preenchimento automático foi sincronizado em todos os dispositivos para melhorar o preenchimento do formulário.
- Os usuários podem retornar ao app com um botão "Voltar" integrado.
Guias personalizadas x Atividade confiável na Web
As Atividades confiáveis na Web estendem o protocolo de 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 Progressive Web App, em tela cheia, no próprio app Android.
Onde as guias personalizadas estão disponíveis?
Guias personalizadas é um recurso compatível com navegadores na plataforma Android. Ele foi lançado originalmente pelo Chrome, na versão 45. A maioria dos navegadores Android oferece suporte ao protocolo.
Queremos feedback, perguntas e sugestões sobre este 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.
- Vamos começar
- Personalizar a interface
- Adicionar interatividade personalizada
- Aquecimento e pré-busca: uso do serviço de guias personalizadas
- Multitarefas com guias personalizadas parciais
- Medir o engajamento do usuário
Em caso de dúvidas, verifique a tag chrome-custom-tabs no StackOverflow.