Há muitas razões para os desenvolvedores trazerem a Web para o Android: talvez reutilizem um widget da Web em um app Android, incorporem conteúdo próprio ou de terceiros e até mesmo levem todo o app da Web para a plataforma. Seja qual for o caso de uso, o Android tem muitas ferramentas para tornar isso possível.
Estas são as atualizações mais recentes dessas ferramentas. Exemplo:
- Melhorias na privacidade e melhor suporte para telas grandes, como suporte ao recurso de arrastar e soltar de imagens no WebView.
- Agora as guias personalizadas são compatíveis com guias personalizadas parciais.
- recursos integrados para PWA, como interface de instalação aprimorada e API Play Billing em Atividades confiáveis na Web.
Vamos nos aprofundar e aprender mais.
WebView
O WebView é a maneira mais usada de incorporar conteúdo da Web em apps Android, já que a grande maioria dos apps Android usam esse recurso. Essa é uma ótima maneira de integrar perfeitamente a interface da Web a experiências de apps Android nativos. Por exemplo, você pode incorporar diferentes interfaces da Web ao seu app, como anúncios, widgets ou até mesmo navegadores. Um dos pontos fortes do WebView é sua API poderosa para controlar e modificar o conteúdo da Web que está sendo carregado. Quais são as novidades do WebView?
Cabeçalho X-Requested-With
Vamos começar com a privacidade e a descontinuação do cabeçalho X-Requested-With. Quando um usuário instala e executa um aplicativo que usa um WebView para incorporar conteúdo da Web, o WebView adiciona o cabeçalho X-Requested-With a cada solicitação enviada aos servidores. O valor desse cabeçalho é o nome do APK do aplicativo. Isso significa que cada solicitação inclui informações específicas sobre o contexto em que o usuário está consumindo conteúdo da Web e vaza a identidade do app para o serviço on-line. Para proteger a privacidade do usuário, a equipe do WebView iniciou um teste de descontinuação que remove esse cabeçalho de todas as solicitações da ferramenta.
Mas e se o app depender do cabeçalho X-Requested-With? Recomendamos usar a nova API de ativação, que permite enviar o cabeçalho da solicitação para origens específicas. Isso significa que você tem o melhor dos dois mundos: pode continuar a oferecer suporte aos recursos criados com base nesse cabeçalho e, ao mesmo tempo, garantir que a privacidade do usuário seja preservada em todos os outros casos. Se você quiser manter o comportamento atual, inscreva-se no teste de origem X-Requested-With Deprecation.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Teste de WebView
O próximo tópico é os testes. Se você é um desenvolvedor da Web e seus sites recebem muito tráfego de WebViews, temos duas atualizações:
O WebView agora tem suporte a testes de origem do Chrome. Os testes de origem dão acesso a recursos novos ou experimentais no Chrome. Use esses recursos para testar um novo recurso antes que ele seja disponibilizado para todos. Até agora, os testes de origem só estavam disponíveis no Chrome para computadores e dispositivos móveis. A partir do Chrome M110, os testes de origem também funcionam no WebView.
Agora é muito mais fácil instalar o WebView Beta. É altamente recomendável testar seu site usando o canal Beta do WebView para garantir que ele funcione bem nas próximas versões. Para fazer isso, participe do programa de testes Beta do WebView na Google Play Store. Seu dispositivo será registrado automaticamente.
Suporte a dispositivos de tela grande
Nosso objetivo é fazer com que a WebView funcione bem em dispositivos de tela grande. Um passo nessa direção é que o WebView agora suporta o recurso de arrastar e soltar imagens. Por exemplo, no modo de exibição de tela dividida, é possível arrastar uma imagem de um WebView para outro app.
É muito fácil adicionar o recurso de arrastar e soltar às WebViews: basta declarar um DropDataProvider no AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Em relação a dispositivos de tela grande, o Chrome e o WebView no Android U terão suporte total à escrita à mão em campos de entrada de texto HTML e a gestos de entrada para excluir texto ou adicionar espaços. O suporte à escrita à mão já está disponível para todos os dispositivos Samsung com o One UI 5.1, como o S23 Ultra. Para outros dispositivos que usam o Android T, é possível ativar a escrita à mão nas entradas de HTML em "Opções do desenvolvedor".
Mecanismo JavaScript do Jetpack
Às vezes, pode ser necessário executar JavaScript no seu app sem exibir conteúdo da Web. Por exemplo, ao compartilhar lógica de negócios em apps da Web e para dispositivos móveis. Para facilitar esse processo, lançamos a versão Alfa do novo mecanismo JavaScript do JetPack no ano passado. Essa biblioteca usa o V8, o mecanismo JavaScript do Chrome, e permite que o seu aplicativo avalie código JavaScript ou WebAssembly sem criar uma instância de WebView. O melhor do novo mecanismo JavaScript é que ele executa o JavaScript em um processo diferente, o que a torna uma maneira segura e estável de executar JavaScript no app. Além disso, requer menos recursos do que uma instância de WebView.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
Guias personalizadas
O WebView é ótimo para integrar a interface da Web ao seu app. Mas e quanto à permissão para os usuários navegarem pelo conteúdo da Web no seu app?
Esse é um ótimo caso de uso para guias personalizadas. Eles são uma maneira segura e fácil de usar para permitir que os usuários visualizem conteúdo da Web no seu app. A grande vantagem deles é que eles não precisam fazer login novamente nos sites favoritos deles. Isso ocorre porque elas são uma instância do compartilhamento do navegador e dos cookies padrão do usuário e oferecem todos os recursos da plataforma da Web e APIs compatíveis com o navegador que o aciona.
Isso também significa que, se o navegador padrão for o Chrome, uma guia personalizada será aberta. Se o navegador padrão for o Firefox, uma guia personalizada será aberta. A maioria dos principais navegadores do Android oferece suporte a guias personalizadas, e se o navegador padrão não for compatível com guias personalizadas, o aplicativo do navegador será aberto.
O melhor das guias personalizadas é que você pode estilizá-las para combinar com a aparência do seu aplicativo, adicionar interatividade personalizada por meio de ações e suas próprias barras de ferramentas.
Guias personalizadas parciais
As personalizações das guias personalizadas tiveram um upgrade importante com o suporte para guias personalizadas parciais. Eles permitem que os usuários realizem várias tarefas entre apps e a Web. Até agora, nas guias personalizadas, a sobreposição de guias do navegador cobria toda a tela. Agora é possível controlar a altura da sobreposição da guia personalizada. Dessa forma, os usuários podem interagir com o conteúdo do app e da Web ao mesmo tempo. Se o navegador do usuário não for compatível com guias personalizadas parciais, o usuário verá apenas a guia personalizada compatível em tela cheia.
Tudo o que você precisa fazer é se conectar ao serviço de guias personalizadas, transmitir a sessão para o CustomTabsBuilder e chamar setActivityHeight.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
O YouTube lançou guias personalizadas inline redimensionáveis em anúncios de resposta direta. Dessa forma, conseguiram implementar uma nova maneira de interagir com anúncios e conteúdo da Web sem interromper a experiência orgânica no aplicativo.
Mas e quanto a tablets e outros dispositivos de tela grande? A equipe do Chrome está trabalhando em uma nova experiência com guias personalizadas lado a lado para o modo paisagem e dispositivos de tela grande. Ao definir uma largura máxima da guia, junto com um ponto de interrupção, a experiência da guia personalizada vai alternar automaticamente entre a sobreposição de página inferior e a experiência lado a lado. O recurso já está disponível no Canary e será lançado por volta de julho de 2003. Se quiser testá-lo, confira o código-fonte do aplicativo de exemplo de guias personalizadas do Chromium.
Medir indicadores de engajamento
A segunda grande atualização nas guias personalizadas é avaliar o engajamento do usuário em sessões específicas. Se o app mostrasse regularmente conteúdo para seus usuários, incluindo links, por exemplo, em um feed de notícias, não seria ótimo saber quais links um usuário considera valiosos e quais não? Essas informações podem ser realmente úteis quando se trata de priorizar quais links mostrar para seus usuários.
A equipe do Chrome adicionou visibilidade de métricas específicas de cada sessão às guias personalizadas do navegador. Além de quanto tempo um usuário permanece em uma página, agora você também pode ver a distância e a direção da rolagem e o engajamento geral com o conteúdo da Web.
Os indicadores de engajamento estão disponíveis a partir do Chrome 114 e exigem a Biblioteca de Suporte androidx.browser:browser:1.6.0-alpha01 ou mais recente. Para saber mais, confira o guia de iniciação dos indicadores de engajamento.
PWA
Também há atualizações no PWA, um conjunto de tecnologias que possibilitam a criação de experiências semelhantes a apps, criadas e implantadas na Web.
Com o PWA no Android, seu app da Web pode ser instalado: ele fica disponível em outros apps da plataforma, na tela inicial, no acesso rápido, nas configurações e em outras plataformas.
Os recursos dos PWAs são criados com base em padrões da Web. Eles se concentram na compatibilidade entre plataformas, oferecendo aos desenvolvedores as ferramentas para criar um app da Web apenas uma vez e permitindo que os usuários o instalem em qualquer dispositivo. Criar um aplicativo da Web instalável não significa que você não pode ou não deve ter um aplicativo Android nativo, mas é outra opção de levar a Web para o Android.
Vamos conhecer alguns recursos que fazem seu app da Web instalável se sentir confortável no Android.
Queríamos capacitar os usuários para instalar os sites que mais gostam. A primeira etapa foi remover o gerenciador de busca do service worker como requisito para instalação no Android e no Chrome. Além disso, o Chrome pula a inicialização do service worker se o gerenciador de busca estiver vazio. O Chrome vai fazer experimentos para expandir o acesso dos usuários à instalação. Fique de olho nisso e envie seu feedback.
O requisito de service worker era para que os desenvolvedores criassem uma experiência do usuário consistente com outros apps Android. Ele pode ser usado para criar uma página informando ao usuário que ele não pode usar o app off-line.
Percebemos que poderíamos facilitar a carga de trabalho para os desenvolvedores e garantir que esses aplicativos fornecessem uma boa experiência de instalação desde o início. Por isso, o Chrome adicionou uma experiência off-line padrão que mostra aos usuários uma tela com o ícone do app, informando que estão off-line, sem exigir trabalho adicional dos desenvolvedores.
É claro que a API do service worker ainda está disponível para criar experiências off-line personalizadas e implementar outros recursos, como o armazenamento em cache, para melhorar o desempenho.
Alguns outros recursos que podem proporcionar uma experiência sofisticada de app da Web para o Android incluem a interface de instalação aprimorada. Ao adicionar os campos description e screenshots ao manifesto da Web, os usuários terão uma experiência de instalação mais próxima do que as app stores mostram para descrever seu app.
Também temos atalhos. Ao adicionar uma matriz chamada shortcuts, que descreve um conjunto de ações rápidas que os usuários realizam com frequência no app, eles poderão acessar essas ações tocando no ícone do app e mantendo-o pressionado.
Com as APIs Web Share e Web Share Target, seu app pode interagir com outros apps, como qualquer outro app de plataforma. Seu app será uma opção nas planilhas de compartilhamento e poderá compartilhar e receber fotos, textos e outros arquivos.
Confira a palestra "A Web: sua plataforma para o crescimento" no I/O para mais informações sobre como as empresas estão aproveitando essas tecnologias.
Atividade confiável na Web
Outra maneira de levar a Web para o Android é usando a Atividade confiável na Web (TWA, na sigla em inglês).
A TWA é a melhor maneira de mostrar conteúdo da Web próprio em tela cheia no app. É a solução ideal para desenvolvedores que querem unir o app da Web como um app Android ou usar o site como parte de um.
A TWA parece estar estritamente relacionada ao PWA, mas não está. Sim. Ao usar a TWA, é possível publicar seu app da Web instalável no Google Play, mas também é possível criar uma única atividade na Web e incluí-la no app Android.
Uma Atividade confiável na Web é renderizada pelo navegador do usuário exatamente da mesma forma que um usuário a veria no navegador, com a exceção de que elas são executadas em tela cheia e não mostram uma barra de URL. Isso significa que eles são compatíveis com todos os recursos de plataforma da Web e APIs suportados pelo navegador.
Confira algumas vantagens de encapsular seu app da Web usando TWA:
Publicar no Google Play: permite que o app tenha acesso à visibilidade e à distribuição do Google Play. Ter acesso à API Play Billing, que permite aos desenvolvedores gerenciar as vendas de produtos e softwares digitais nos apps, facilitando a configuração de produtos, vendas, assinaturas e muito mais. Delegar notificações e permissões de geolocalização ao app Android em vez do site.
Confira este artigo para saber mais sobre como a ContactDirect usou a TWA para beneficiar os usuários e triplicou as taxas de conversão.
Conclusão
Como você viu, há muitas opções diferentes disponíveis para incorporar conteúdo da Web no app, e todas essas opções estão em constante melhoria.