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 isso.
Confira as atualizações mais recentes dessas ferramentas. Exemplo:
- Melhorias na privacidade e suporte aprimorado para telas grandes, como suporte para arrastar e soltar imagens na WebView.
- As Guias personalizadas agora oferecem suporte a 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 mergulhar 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. Uma das maiores vantagens da WebView é a API poderosa 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 consome 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 iniciou 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 usar a 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ê:
A WebView agora oferece suporte a 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 fazer isso, participe do programa de teste Beta da WebView na Google Play Store, e 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 a WebView agora oferece suporte ao arrastar e soltar de imagens. Por exemplo, no modo de visualização de tela dividida, você pode 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 isso, lançamos a versão alfa da nova engine JavaScript do 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. O novo mecanismo JavaScript é ótimo porque executa o JavaScript em um processo diferente, o que o torna uma maneira segura e estável de executar JavaScript no app. Ele também requer menos recursos do que uma instância da 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 dos cookies compartilhados e oferecem todos os recursos e APIs da plataforma da Web com suporte do navegador que os hospeda.
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 a elas, o app de navegador será aberto.
O legal 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 receberam uma grande atualização com suporte a Guias personalizadas parciais. Eles permitem que os usuários realizem 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.
Basta se conectar ao serviço Custom Tabs, 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 as guias personalizadas inline 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 de guias com um ponto de interrupção, a experiência da guia personalizada alterna 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 2023. Se quiser testar, confira o código-fonte do app de exemplo das 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 de saber quanto tempo um usuário fica em uma página, agora você também pode conferir a distância e a direção do 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, 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 do PWA são desenvolvidos com base em padrões da web; eles se concentram na compatibilidade entre plataformas, fornecendo aos desenvolvedores as ferramentas para criar um aplicativo da web uma vez e permitindo que os usuários o instalem em qualquer dispositivo que escolherem. 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 pudessem instalar 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 vai pular 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 facilitar o trabalho dos desenvolvedores e garantir que esses apps oferecessem 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 para que eles saibam que estão off-line, sem exigir mais trabalho dos desenvolvedores.
A API 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 aprimorada 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 fazem com frequência no app, eles poderão acessar essas ações pressionando o ícone do app por muito tempo.
Usando as APIs Web Share e Web Share Target, seu app pode interagir com outros apps, como qualquer outro app da plataforma. Seu app será uma opção nas folhas de compartilhamento e poderá compartilhar e receber fotos, textos e 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).
O TWA é a melhor maneira de mostrar conteúdo da Web próprio em tela cheia no seu app. É a solução ideal para desenvolvedores que querem agrupar o app da Web como um aplicativo Android ou usar o site como parte dele.
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 confiável da Web é renderizada pelo navegador do usuário exatamente da mesma forma que um usuário a veria no navegador, exceto quando é executada em tela cheia e não exibe uma barra de URL. Isso significa que eles oferecem suporte a 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. Acesso à API Play Faturamento, que permite que os desenvolvedores gerenciem as vendas de produtos 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.
Leia este artigo para saber como a ContactsDirect 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.