Os desenvolvedores têm muitos motivos para trazer a Web para o Android: reutilizar um widget da Web em um app Android, incorporar conteúdo próprio ou de terceiros ou até mesmo trazer 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.
Confira as atualizações mais recentes dessas ferramentas. Exemplo:
- Melhorias de privacidade e melhor suporte a telas grandes, como o recurso de arrastar e soltar imagens no WebView.
- As guias personalizadas agora são compatíveis com guias personalizadas parciais.
- Recursos integrados para PWA, como a interface de instalação mais avançada e a API Play Billing em atividades confiáveis na Web.
Vamos nos aprofundar e saber mais.
WebView
A WebView é a maneira mais usada para incorporar conteúdo da Web em apps Android, já que a grande maioria deles usa esse recurso. É uma ótima maneira de integrar a interface da Web em experiências de apps Android nativos. Por exemplo, você pode incorporar diferentes interfaces da Web no seu app, como anúncios, widgets ou até mesmo navegadores no app. Um dos pontos fortes do WebView é sua API potente para controlar e modificar o conteúdo da Web que está sendo carregado. Quais são as novidades da 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 uma WebView para incorporar conteúdo da Web, a 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 da WebView começou um teste de descontinuação que remove esse cabeçalho de todas as solicitações da WebView.
Mas e se o app depender do cabeçalho X-Requested-With? Recomendamos o uso da nova API de ativação, que permite enviar seletivamente o cabeçalho de solicitação para origens específicas. Isso significa que você tem o melhor dos dois mundos: pode continuar oferecendo suporte aos recursos atuais criados com base nesse cabeçalho e garantir que a privacidade do usuário seja preservada em todos os outros casos. Se você quiser manter o comportamento atual, também pode se inscrever no teste de origem X-Requested-With Deprecation.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Testes da WebView
O próximo tópico é o teste. Se você é um desenvolvedor da Web e seus sites recebem muito tráfego de WebViews, há duas atualizações para você:
O WebView agora oferece suporte aos testes de origem do Chrome. Os testes de origem dão acesso a recursos novos ou experimentais no Chrome. Você pode usar esses testes para experimentar um novo recurso antes que ele seja disponibilizado para todos. Até agora, os testes de origem só estavam disponíveis no Chrome para computador e dispositivos móveis, mas, a partir do Chrome M110, eles também funcionam na WebView.
Agora é muito mais fácil instalar a WebView Beta. É altamente recomendável testar seu site usando o canal Beta da WebView para garantir que ele funcione bem nas próximas versões da WebView. Para 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 é que a WebView funcione bem em dispositivos de tela grande. Um passo nessa direção é que a WebView agora oferece suporte ao arrastar e soltar de imagens. Por exemplo, no modo de visualização de tela dividida, é possível arrastar uma imagem de uma WebView para um app diferente.
É muito fácil adicionar 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>
Falando em 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 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 One UI 5.1, como o S23 Ultra. Para outros dispositivos que usam o Android T, é possível ativar a escrita à mão em entradas HTML em "Opções do desenvolvedor".
Mecanismo JavaScript do Jetpack
Às vezes, talvez seja necessário executar JavaScript no app sem precisar mostrar nenhum conteúdo da Web. Por exemplo, ao compartilhar a lógica de negócios entre apps da Web e para dispositivos móveis. Para facilitar, lançamos a versão Alfa do novo mecanismo JavaScript JetPack no ano passado. Essa biblioteca usa o V8, o mecanismo JavaScript do Chrome, e permite que seu aplicativo avalie o código JavaScript ou WebAssembly sem criar uma instância da WebView. Uma das melhores coisas do novo mecanismo JavaScript é que ele executa seu JavaScript em um processo diferente, o que faz dele uma maneira segura e estável de executar JavaScript no seu aplicativo. Ele também 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
A WebView é ótima para integrar a interface da Web ao seu app. Mas e se você permitir que os usuários naveguem pelo conteúdo da Web no app?
Esse é um ótimo caso de uso para as guias personalizadas. Elas são uma maneira segura e fácil de permitir que os usuários acessem conteúdo da Web no seu app. A grande vantagem é que os usuários não precisam fazer login novamente nos sites favoritos. Isso ocorre porque eles são uma instância do navegador padrão do usuário e os cookies que estão sendo compartilhados, além de oferecerem todos os recursos da plataforma da Web e APIs com suporte do navegador.
Isso também significa que, se o navegador padrão for o Chrome, uma guia personalizada será aberta no Chrome. Se o navegador padrão for o Firefox, uma guia personalizada será aberta no Firefox. A maioria dos principais navegadores no Android oferece suporte a guias personalizadas. Se o navegador padrão não oferecer suporte, o app de navegador será aberto.
O melhor das guias personalizadas é que você pode estilizá-las para combinar com a aparência do app, adicionar interatividade personalizada por meio de ações e suas próprias barras de ferramentas.
Guias personalizadas parciais
As personalizações de guias personalizadas tiveram uma grande atualização com suporte a Guias personalizadas parciais. Com eles, os usuários podem realizar várias tarefas entre apps e a Web. Até agora, ao usar as guias personalizadas, a sobreposição de guias do navegador cobria toda a tela. Agora você pode controlar a altura da sobreposição da guia personalizada. Assim, os usuários podem interagir com seu app e conteúdo da Web ao mesmo tempo. Se o navegador do usuário não oferecer suporte a guias personalizadas parciais, ele vai ver a guia personalizada em tela cheia.
Tudo o que você precisa fazer é se conectar ao serviço Custom Tabs, transmitir a sessão ao 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 redimensionáveis em anúncios de resposta direta. Dessa forma, eles conseguiram implementar uma nova maneira de interagir com anúncios e conteúdo da Web sem interromper a experiência orgânica no app.
Mas e tablets e outros dispositivos de tela grande? A equipe do Chrome está trabalhando em uma nova experiência de guias personalizadas lado a lado para o modo paisagem e dispositivos de tela grande. Ao definir uma largura máxima da guia e um ponto de interrupção, a experiência da guia personalizada alternará automaticamente entre a sobreposição da 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 você quiser testá-lo, confira o código-fonte do aplicativo de exemplo Guias personalizadas do Chromium.
Como medir indicadores de engajamento
A segunda grande atualização das guias personalizadas é a medição do engajamento do usuário específico da sessão. Se o app mostra conteúdo regularmente aos 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 muito úteis para priorizar quais links mostrar aos usuários.
A equipe do Chrome adicionou visibilidade de métricas específicas da sessão às guias personalizadas do Chrome. Além do tempo que um usuário permanece em uma página, agora você também pode conferir a distância e a direção de rolagem, além do 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 versões mais recentes. Para saber mais, consulte o guia de introdução aos 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, criados e implantados na Web.
Com o uso de PWA no Android, seu app da Web pode ser instalável: ele vai aparecer junto com os outros apps da plataforma, na tela inicial, na tela de início, nas configurações e em outras plataformas.
Os recursos de PWA 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 uma vez e permitindo que os usuários o instalem em qualquer dispositivo. Criar um app da Web instalável não significa que você não pode ou não deve ter um app Android nativo, mas é outra opção para levar a Web para o Android.
Vamos conferir alguns recursos que fazem com que seu app da Web instalável se sinta em casa no Android.
Queríamos que os usuários instalassem os sites que mais importam para eles. A primeira etapa foi remover o gerenciador de busca do service worker como um 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 realizar experimentos para ampliar o acesso à instalação para os usuários. Fique de olho nelas e envie seu feedback.
O requisito do worker de serviço existia 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 diminuir a carga de trabalho para desenvolvedores e garantir que esses apps ofereçam 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 eles estão off-line, sem exigir mais trabalho 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 trazer uma experiência de app da Web mais refinada para o Android incluem a UI de instalação mais rica. 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 mantendo o ícone do app pressionado.
Com as APIs Web Share e Web Share Target, seu app pode interagir com outros apps, como qualquer outro da plataforma. Ele vai aparecer como opção nas páginas de compartilhamento e poderá compartilhar e receber fotos, mensagens de texto, entre outros arquivos.
Confira a palestra do I/O "A Web: sua plataforma para crescimento" para mais informações sobre como as empresas estão usando essas tecnologias.
Atividade Confiável na Web
Outra maneira de trazer 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 à PWA, mas não é. Sim, usando a TWA, você pode publicar seu app da Web instalável no Google Play, mas também pode criar uma única atividade na Web e incluí-la no app Android.
Uma Atividade na Web Confiável é renderizada pelo navegador do usuário exatamente da mesma forma que um usuário a veria no navegador, exceto pelo fato de que ela é exibida em tela cheia e não exibe uma barra de URL. Isso significa que eles são compatíveis com todos os recursos e APIs da plataforma da Web aceitos pelo navegador que os hospeda.
Algumas vantagens de agrupar seu app da Web usando a TWA são:
Publicação no Google Play, que dá ao seu app 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 ao seu app, e todas elas estão sendo aprimoradas continuamente.