WebView Android: Transforme Sites e Blogs em Aplicativos

Criar um aplicativo do seu site ou blog pode ser mais simples do que você imagina. A WebView é a alternativa mais rápida para você atingir esse objetivo - claro que há algumas vantagens (prós) e limitações (contras) comparado a um aplicativo Android nativo - falaremos mais sobre isso, mas para quem está começando, esse é o componente ideal.

Mas o que é WebView?

Em curtas palavras, a WebView é um componente do SDK Android que permite aos desenvolvedores exibirem e renderizarem conteúdos de páginas da web como sites e blogs dentro do seu aplicativo através da Activity.

Este tutorial vai te ensinar a trabalhar com o componente WebView do Android e explorar recursos adicionais. Além disso, você vai aprender a criar a versão aplicativo do seu site responsivo de forma rápida e simples.

Você vai aprender outros recursos como:

• Integrar o seu Javascript ao código Java/Kotlin para manipular dados entre a web e o seu aplicativo.
• Trabalhar com o suporte ao zoom na WebView.
• Como e porque aplicativos utilizam a WebView: Sim! o Facebook e o Bradesco precisam usar esse recurso.
• Aplicativo ou WebView? Os prós e contras entre eles.

---

WebView: Primeiros Passos Para Transformar o Site ou Blog No Aplicativo Android

Dito anteriormente, o componente WebView permite o desenvolvedor exibir conteúdos de sites e blogs e renderizá-los dentro de um aplicativo como parte do layout através das Activities - semelhante ao navegador Google Chrome.

A primeira coisa a se fazer para usar a WebView e transformar um site em um aplicativo Android é criar um novo projeto no Android Studio com uma estrutura vazia Empty Activity.

O Android Studio nos auxilia na construção desse projeto inicial com a ajuda do seu wizard interativo.

Criando o Projeto de Exemplo WebView

Abra o Android Studio instalado no seu computador. Caso ainda não tenha instalado a última versão da ferramenta, siga esses tutoriais de acordo com o seu sistema operacional:

• Como instalar o Android Studio no Mac
• Como instalar o Android Studio no Windows
• Como instalar o Android Studio no Linux

Com o Android Studio aberto, escolha a opção Start a new Android Studio project.

Agora escolha o template inicial como Empty Activity para começarmos a criar o aplicativo do zero. Clique em Next.

Defina as características do projeto como nome, package e linguagem de programação. No meu exemplo foi definido:

• Name: WebViewTutorial
• Package Name: co.tiagoaguiar.webviewtutorial
• Save Location: <path do meu computador>
• Language: Java (ou Kotlin)
• Minimum API level: API 17: Android 4.2 (Jelly Bean)

Clique em Finish e vamos começar a trabalhar com a WebView.

Abra o arquivo de layout activity_main.xml e altere os componentes ConstraintLayout e TextView para o FrameLayout e para o novo componente WebView.

Vamos utilizar o FrameLayout neste caso somente para facilitar o tutorial da WebView

Seu código deve se parecer com este aqui:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<WebView
		android:id="@+id/webview"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />

</FrameLayout>

Ao adicionar o componente WebView dentro do FrameLayout e com as propriedades match_parent na altura e largura, podemos ter uma WebView preenchendo toda a tela da Activity. Além disso, defina um id para podermos ter essa referência no código lógico em Java ou Kotlin.

Abra a MainActivity e busque a referência da WebView com o findViewById() e carregue a Url que você desejar com o método loadUrl().

O seguinte código mostra exatamente como abrir uma url, seja um site ou blog com a WebView:

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		WebView webView = findViewById(R.id.webview);
		webView.loadUrl("https://www.google.com.br");
	}
}

Faça os imports necessários para a webkit android.webkit.WebView.

Vamos tentar abrir a página do Google. Mas antes, precisaremos adicionar a permissão de acesso a internet para o aplicativo, senão, a página não abrirá.

Adicione a permissão android.permission.INTERNET ao seu AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="co.tiagoaguiar.webviewtutorial">

	<uses-permission android:name="android.permission.INTERNET" />

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />

				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
	</application>

</manifest>

Execute o aplicativo no emulador ou em um smartphone para ver a página do Google em execução.

Em alguns casos, haverá urls que não irão abrir ocasionando algum tipo de erro como Cleartext HTTP traffic not permitted. Isso ocorre porque nas versões mais recentes do Android (versão 8) é aconselhável acessar páginas seguras com HTTPS.

Caso a Url que você queira acessar não estiver abrindo, será necessário adicionar algumas propriedades no AndroidManifests.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="co.tiagoaguiar.webviewtutorial">

	<uses-permission android:name="android.permission.INTERNET" />

	<application
		android:usesCleartextTraffic="true">
	</application>

</manifest>

Além de Urls que respondem a páginas HTML podemos também adicionar Urls de imagens como jpg ou png. O sistema do Android e da WebView será capaz de renderizar o conteúdo da Url - seja HTML ou não.

Adicione a Url de uma imagem como a do site tiagoaguiar.dev e veja a WebView exibindo-a.

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);

	WebView webView = findViewById(R.id.webview);
	webView.loadUrl("https://cdn.tiagoaguiar.co/images/img/logo-tiagoaguiar-white.png");
}

Mas será que podemos exibir um conteúdo HTML sem passar o Url?

Sim! Vamos ver como adicionar um conteúdo HTML direto na WebView.

WebView: Exemplo de Conteúdo HTML Dentro do Aplicativo

Há duas formas de exibir um conteúdo diretamente na WebView caso não utilize uma Url. Você pode escrever a sintaxe HTML diretamente no seu código Java / Kotlin no formato de String ou buscar o código HTML de um servidor e carregar na WebView.

Vamos fazer a primeira opção para visualizar uma página escrita em HTML. O método que vamos usar será o loadData.

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);

	WebView webView = findViewById(R.id.webview);

	String html = "<html><body>Hello World WebView</body></html>";
	webView.loadData(html, "text/html", "UTF-8");
}

Neste método, precisamos definir o mimeType do conteúdo - que neste caso é HTML - e o encoding. Geralmente usamos UTF-8 para manter os caracteres corretos.

Agora estamos prontos para começar a carregar qualquer página da web e, eventualmente, transformar o seu site ou blog em um aplicativo que vai para o Google Play.

Transformando Meu Site Em Um Aplicativo Android

Antes de começar a colocar o seu blog ou site na WebView e subir o aplicativo para a loja, precisamos validar se ele é um site responsivo e se ele foi construídos com as boas práticas de mobile-friendly.

Nos dias de hoje, ter um site responsivo é indispensável para aparecer na web e fazer a sua audiência gostar e voltar no seu site. Cada dia que passa, as pessoas acessam mais e mais os sites através de dispositivos móveis - smartphones e tablets.

Validando Layout e Responsividade

Para validar e responsividade do seu site você precisará de duas ferramentas para fazer alguns testes:

1. Mobile-Friendly Test
2. PageSpeed Insights

A primeira irá dizer se o seu site está amigável com dispositivos móveis como tablets e smartphones.

A segunda vai dizer o quão rápido é esse site - vamos focar na versão mobile. Dependendo do resultado, será necessário realizar algumas otimizações para melhorar a experiência do usuário após acessar sua WebView.

Para validar a compatibilidade com o mobile, basta utilizar a ferramenta fornecida pelo Google conhecida como Mobile-Friendly Test.

Irei utilizar o meu próprio blog tiagoaguiar.co para testar e criar a versão de aplicativo do blog.

Após adicionar a Url do meu blog e esperar o Google analisar com a ferramenta, ele exibirá o resultado como este:

O sinal verde indica que o Design do blog que fiz está amigável para dispositivos móveis e já pode ser adicionado no meu aplicativo.

Caso você não tenha um site ou um blog mobile friendly, será necessário fazer ajustes no layout através de recursos de UX Design antes de fazer a versão do seu aplicativo.

Agora vamos identificar a velocidade com o que o blog vai carregar. Aqui quanto maior o número, melhor. Há vários fatores que sempre podemos melhorar na velocidade de carregamento do site - principalmente falando de WebView.

Não fique muito na “neura” desses números porque para aumentá-los não é uma tarefa fácil (principalmente no mobile). É só uma direção para você identificar os pontos de melhora.

No caso do meu blog, estou hoje com 73 pontos de 100 - o que indica vários pontos de melhoria como tamanho de imagens, ajustes no código-fonte, entre outros.

Já no Desktop, chegando aos 97 de 100. Bem que no mobile poderia estar assim também :-)

Com esses dados em mãos já posso colocar a minha Url na WebView e ver como fica o resultado final:

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		WebView webView = findViewById(R.id.webview);
		webView.loadUrl("https://tiagoaguiar.co/");
	}
}

A Toolbar ainda está sendo exibida e acredito que não ficou tão legal com ela. Mais à frente vamos customizar o layout do aplicativo para deixar um pouco mais parecido com um web app.

Habilitando o Javascript

Se você reparar bem, os menus deste blog não estão funcionando. Isso porque os menus utilizam recursos do Javascript para exibir os menus e outras animações. Logo, precisamos habilitar o interpretador de Javascript na WebView.

Para fazer isso, basta adicionar a linha

webView.getSettings().setJavaScriptEnabled(true);

Possivelmente você verá um alerta do Android Studio indicando para usar este método somente se você confia na fonte de informações - a página - que você está carregando. Isso porque, com o Javascript é possível executar “coisas” que, eventualmente, comprometerão os dados - claro que se for uma página que você não confia.

Clique no ícone de “hamburguer” para ver o menu habilitado.

Caso você esteja usando um Android na versão 8 e clicar em um artigo, o sistema Android irá abrir a página no navegador Chrome. Isso acontece porque nestas versão o client que manipula essa WebView é do Chrome.

Para continuar abrindo as páginas dentro da WebView, você precisará trocar o WebViewClient para um novo definido no código, veja:

WebView webView = findViewById(R.id.webview);
webView.loadUrl("https://tiagoaguiar.co/");
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());

Dessa forma, ao clicar em um artigo, todas as páginas continuarão a ser carregadas dentro da WebView e não mais no Google Chrome.

WebView: Identificando o Carregamento de Página

Talvez você tenha reparado que o carregamento da página leva um certo tempo. Isso porque temos o tempo de resposta do servidor mais a renderização do HTML, CSS e Javascript na tela (o DOM).

Para evitar que o usuário tenha a sensação que o aplicativo travou por algum motivo, vamos adicionar uma ProgressBar para indicar que o nosso site e blog ainda estão carregando.

Para adicionar essa progress bar vamos precisar alterar o XML e também adicionar mais dois métodos do nosso client da WebView. O onPageStarted() e o onPageFinished().

Altere a estrutura do XML para que ele fique desta forma:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<WebView
		android:id="@+id/webview"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />

	<ProgressBar
		android:id="@+id/progress"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="center" />

</FrameLayout>	

Perceba que ao usar o FrameLayout, conseguimos sobrepor os componentes WebView e ProgressBar, ainda com a ajuda do layout_gravity="center".

Agora, no seu código Java ou Kotlin, implemente os dois métodos citados desta forma:

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);

	final ProgressBar progressBar = findViewById(R.id.progress);
	progressBar.setVisibility(View.INVISIBLE);

	WebView webView = findViewById(R.id.webview);
	webView.loadUrl("https://tiagoaguiar.co/");
	webView.getSettings().setJavaScriptEnabled(true);

	webView.setWebViewClient(new WebViewClient(){
		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);
			progressBar.setVisibility(View.VISIBLE); // mostra a progress
		}

		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);
			progressBar.setVisibility(View.INVISIBLE); // esconde a progress
		}
	});

}

O primeiro método onPageStarted é chamado assim que a página é inicializada - um ótimo momento para exibir a progress bar.

Já o segundo método onPageFinished é chamado assim que a página é finalizada.

Além de manipular a progress bar, podemos identificar qual Url está sendo chamada e até o favicon usado.

Navegação da WebView: Back Button e Links Externos

Também é possível interceptar a navegação da WebView para adicionar alguma lógica de programação que você queira.

Nesta parte, vamos gerenciar a navegação que o ocorre ao apertar o botão de voltar - backButton - e os links externos como Facebook, Youtube e etc.

Links Externos na WebView

Faça o seguinte teste: tente clicar no link do menu onde há a opção de Videos.

Esse link é um redirecionamento para o youtube.com/tiagoaguiar que é o meu canal. Porém, como colocamos o WebViewClient, agora ele vai sempre abrir as páginas dentro da WebView.

Entretanto, se o usuário tiver o aplicativo do Youtube instalado no seu aparelho, seria muito mais interessante abrir o meu canal do Youtube usando o próprio app do Youtube.

Para fazer essas alterações, precisamos para de sobreescrever esses métodos quando o domínio do site for diferente do meu blog. Ou seja, qualquer domínio e link externo deverá abrir com o método tradicional do sistema WebView do Android.

Adicione as seguintes linhas de código onde implementaremos o método shouldOverrideUrlLoading.

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
	if (request.getUrl().getHost().equals("tiagoaguiar.co")) {
		return false;
	}

	Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
	startActivity(intent);
	return true;
}

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
	if (Uri.parse(url).getHost().equals("tiagoaguiar.co")) {
		return false;
	}

	Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
	startActivity(intent);
	return true;
}

A lógica deste código funciona da seguinte forma: os dois métodos são os mesmo, só que o segundo foi depreciado e funciona apenas em versões antigas do Android, mas o objetivo é o mesmo. Escutar as chamadas da WebView.

Sempre que a url - o host - for igual o meu domínio, não sobreescreve (false). Se for diferente do meu domínio, sobreescreve (true) e abre uma nova atividade com a intenção de ACTION_VIEW. Essa intenção vai manter o fluxo convencional do Android para abrir links externos.

Se houver um link universal entre o domínio externo e o aplicativo daquele domínio. Possivelmente é o aplicativo que irá abrir.

A parte de universal links e essa conexão entre domínio / aplicativo ficará para um outro artigo ok. É um assunto muito extenso.

Agora faça o teste novamente. Clique no link de videos e veja se o aplicativo do Youtube abrirá o seu celular.

BackButton WebView

Com os links externos funcionando, precisamos habilitar a navegação natural do site. Isso porque, ao clicar no botão voltar do smartphone, percebemos que o aplicativo é fechado - já que existe apenas uma Activity e não há uma navegabilidade entre elas no Android.

Neste caso, precisamos interceptar o evento de clique no botão voltar e dizer a nossa WebView voltar no histórico de navegação - semelhante ao browser.

Adicione o seguinte bloco de código para escutar esse evento:

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
	if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
		webView.goBack();
		return true;
	}

	return super.onKeyDown(keyCode, event);
}

Agora, os eventos de backButton estão sendo escutados pela WebView e a navegação do blog voltou ao normal.

Customizando o Aplicativo

Estamos quase no fim.

Agora precisamos customizar o aplicativo para deixar mais com a identidade visual do blog. Precisamos remover a Toolbar (ActionBar), alterar as cores e adicionar ícones (optional).

Para remover a Toolbar precisamos alterar o estilo de tema definido no AndroidManifest.xml.

O tema atual definido é o AppTheme e podemos alterá-lo acessando o arquivo res/values/styles.xml.

Vamos colocar como NoActionBar.

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
	<!-- Customize your theme here. -->
	<item name="colorPrimary">@color/colorPrimary</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">@color/colorAccent</item>
</style>

Quanto as cores, vamos alterar o arquivo res/values/colors.xml e colocar a cor como vermelha.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="colorPrimary">#C70600</color>
	<color name="colorPrimaryDark">#940400</color>
	<color name="colorAccent">#D81B60</color>
</resources>

Tudo pronto! Já podemos subir o aplicativo para o Google Play :-).

Caso ainda queira, você pode gerar os ícones de lançadores pelo Android Studio e alterar o padrão. Inclusive alterar o nome do aplicativo no strings.xml

WebView, Javascript e Java / Kotlin: Comunicação

Uma das coisas mais incríveis que podemos fazer com a WebView e o Javascript na sua página é executar funções do nosso código Android Java ou Kotlin.

Imagine o seguinte cenário:

Você quer exibir um alerta usando o recurso do Android Nativo ao invés de um alert convencional do javascript.

É possível chamar essa função que executa esse alerta incluindo parâmetros vindo da sua página!

Vamos fazer esse teste.

Primeiro, precisamos declarar uma InterfaceJavascript no nosso projeto Android para escutar objetos Javascript. Adicione a seguinte linha na sua WebView:

webView.addJavascriptInterface(this, "Android");

Feito isso, precisamos declarar um método na nossa classe que tenha a anotação (annotation) @JavascriptInterface. Dessa forma, estamos dizendo ao Android que esse método será invocado pelo Javascript através do objeto Android.

Vamos escrever o alerta que usaremos no Javascript.

@JavascriptInterface
public void jsShowToast(String toast) {
	new AlertDialog.Builder(this)
			.setTitle("Dialog")
			.setMessage(toast)
			.setPositiveButton(android.R.string.ok, null)
			.create()
			.show();
}

Agora, podemos chamar esse método jsShowToast na nossa página da web.

Para realizar esse teste, eu subi no meu servidor, na home do site, o seguinte javascript:

$(function() { // 1
	function showAndroidToast(toast) { // 2
		if (typeof Android !== 'undefined') // 3
			Android.jsShowToast(toast); // 4
	}
	showAndroidToast('') // 5
})

1. Aqui declaro o onReady do Js
2. Declaro a função Js que será invocada assim que a página estiver pronta
3. Verifico se o objeto Android (aquele definido na Interface da WebView) existe. Caso exista…
4. Executa a função jsShowToast que é exatamente o nome da nossa função Java / Kotlin
5. Executa a função passando o parâmetro do GET webview (aqui é a lógica do meu backend)

Para testar, adicione a url https://tiagoaguiar.co/?webview=olajavascript para ver a mensagem no seu smartphone com um Dialog exibindo a mensagem que chegou no parâmetro webview.

Esse recurso é muito útil não é mesmo? Agora você pode chamar suas funções e métodos Java através do Javascript.

Limitações da WebView

A WebView é um dos componentes mais simples e poderosos do Android. Com ele você fazer praticamente qualquer coisa que você faria na Web.

Porém, ele possui uma certa limitação de recursos e funcionalidades.

Por mais que isto facilite demais a vida daqueles que querem ter a versão aplicativo do seu site escrevendo pouquíssimas linhas de código, nem sempre queremos apenas exibir conteúdo para o usuário.

Algumas funcionalidades como sensores do smartphone, unidade de processamento gráfica (GPU) ou input de arquivos são apenas alguns dos recursos que você conseguirá atingir usando a versão nativa e não somente a WebView.

Outro ponto é o tráfego de rede. Quando você usa a WebView, o usuário precisará esperar o seu servidor devolver todo o conteúdo que inclui HTML, CSS e Javascript, o que faz o tráfego de rede ser grande deixando os dados maiores e mais lentos em relação a um aplicativo desenvolvido com os componentes nativos como listas e cards.

Quando desenvolvemos um aplicativo Android nativo, precisamos se preocupar somente com o tráfego de dados JSON, o que é, 10x mais rápido e menor do que carregar todo um website.

Outro ponto é a renderização. Como mostrei no começo do post, você precisa se preocupar com o tempo de resposta e de renderização na versão mobile - o que não é uma tarefa fácil de otimizar. As vezes, um site pode demorar até 5 segundos para carregar, o que é inaceitável, já que mais de 90% das pessoas abandonam um site se ele demorar mais do que isso para carregar segundo estudos feitos.

Login com Google+ pode ser instável na WebView. Mesmo que outros aplicativos como o Facebook utiliza esse recurso caso o usuário não tenha instalado o aplicativo antes.

Esses pontos é semelhante ao nosso teste de abrir o Youtube. Sempre dê preferência em abrir o aplicativo com os componentes nativos para aproveitar todo o potencial que ele tem.

Quanto ao WebView do Sistema Android, Posso Desinstalar?

Talvez você já tenha se deparado com um aplicativo nas configurações do seu celular chamado de Android WebView (e as vezes pedindo atualizações). Geralmente é exibido aos usuários que possuem o smartphone na versão do Android 5.0 (Lollipop) ou superior.

Algumas pessoas ansiosas já vão logo desinstalá-lo para livrar mais espaços na memória do smartphone. Porém, não desinstale!

O WebView do sistema Android é, segundo a própria descrição na Google Play:

O Android WebView é um componente do sistema Android com a tecnologia do Google Chrome que permite que aplicativos Android exibam conteúdo da Web. Esse componente vem pré-instalado no dispositivo e deve ser mantido atualizado para garantir que você receba as atualizações de segurança mais recentes e outras correções de bugs.

Em outras palavras, é um navegador web do Android baseado em um projeto chamado de Chromium. A partir da versão do Lollipop ele foi desacoplado de “dentro do sistema” e passou a ser gerenciado como um aplicativo independente.

Antigamente, esse aplicativo possuía vários bugs nas versões iniciais do Android. Portanto, se alguém lhe disser que é para desinstalá-lo, simplesmente ignore. As versões mais recentes do Android funcionam muito bem.

Alguns aplicativos famosos utilizam o recurso de WebView como o Facebook ou Twitter para compartilhamento de links - até o Bradesco utiliza os recursos de WebView no seu aplicativo.

Inclusive, se você for criar um site responsivo usando a WebView, é importante que esse aplicativo esteja no smartphone do usuário para melhorar a performance e a segurança da navegação.

Logo, incentive o seu usuário a manter instalado esse aplicativo nativo do Android para que seu site responsivo funcione normalmente.

Apesar de todas essas mudanças no sistema do Google Android, as versões mais recentes como o Android 7.0 (Nougat) acaba utilizando o próprio Google Chrome no lugar de uma aplicação independente como a WebView. Já que os smartphones atuais possuem capacidade suficiente e performance para renderizar os sites de forma fluida pelo Chrome.

Usuários entre as versões 4 e 6 do Android devem manter o aplicativo Android WebView sempre atualizado para renderizar o site da melhor forma possível e com segurança.

Assista ao video atualizado em Kotlin

Concluindo: Quando Usar WebView?

Depois desse longo artigo, você pode estar se perguntando:

Quando eu devo e não devo usar a WebView no meu projeto?

Há alguns indicadores para te ajudar a decidir se você deve usar ele ou não.

Por ser algo dinâmico, a WebView é muito útil para aqueles que querem transformar o seu site em um aplicativo da forma mais rápida possível - desde que o site seja responsivo. Se você está começando agora, manipular a WebView é uma tarefa bem simples e bem poderosa.

Além disso, se você tiver uma parte do seu aplicativo nativo como Promoções ou Banners de destaque, você pode adicionar uma WebView para renderizar as suas promoções e seus banners pelo HTML e Javascript. Visto que, uma vez que a promoção acabar, em um simples deploy ou alteração o seu banco de dados remoto você pode alterar a estrutura e lógica de negócio do seu aplicativo.

Sempre dê preferência a desenvolver o aplicativo usando os componentes nativos como RecyclerView, Spinner, Button, TextView. Porque dessa forma, você precisa apenas se preocupar com o tráfego de dados JSON e atribuir nos componentes certos. Inclusive, isso deixará o seu aplicativo mais profissional com os componentes Android, aumentando a performance e segurança.

Outro ponto é o Design. A indústria de aplicativos possue um certo padrão de navegação - seja Android ou iOS. Isso facilita o usuário entender onde fica cada botão ou funcionalidade.

Usar um layout da web que não segue o guideline do Android ou iOS pode prejudicar a experiência do usuário, fazendo ele abandonar o seu aplicativo pra sempre.

Evite abrir páginas que você não conhece ou não tenha total confiança. Isso pode prejudicar o seu aplicativo.

Em resumo, somente você saberá se o momento atual é possível desenvolver o aplicativo totalmente nativo ou usar a WebView em todo o projeto ou em algumas partes.

As vantagens e desvantagens vai te dar um indicativo de qual direção você deve seguir.

Eai, já conhecia esse componente do SDK Android?

Espero ter ajudado.

Se inscreva no meu treinamento completo de desenvolvimento Android aqui

Link do projeto: código-fonte

Maravilha! Em breve você receberá conteúdos exclusivos por e-mail. Continue lendo os artigos para aprender mais sobre programação.

Cadastre-se e receba conteúdos exclusivos

Junte-se ao Squad de desenvolvedores mobile profissionais e receba conteúdos exclusivos somente para assinante

Este site é protegido pelo reCAPTCHA e pela política de privacidade e termos de serviços do Google.

Robôs trabalhando