Verificar ligação à Internet num smartphone

Existem vários processos para verificar a ligação à Internet antes desta ter de se realizar, evitando que surjam erros no ecrã.  No caso dos smartphones  os respetivos ambientes de desenvolvimento já contêm rotinas nativas para fazerem essa verificação. No entanto, o cada vez maior interesse pela criação de aplicações universais – usando o HTML5, Javascript, CSS3, etc. – obriga a procurar respostas que também o sejam nesta matéria, diminuindo o tempo gasto no desenvolvimento de aplicações.

O método que vou explicar a seguir, bastante simples e que não consome muita memória, é uma forma expedita de controlar se o dispositivo tem ligação à Internet (qualquer que ela seja: Wi-Fi, 3G) e avisar o utilizador caso ela não esteja disponível.

Isto parte do princípio que está a usar uma classe do tipo ‘WebView’ que lhe permite embeber conteúdos Web na sua aplicação mobile.

Testar a ligação à Internet

Uma maneira fácil de fazer esta verificação é tentar carregar uma imagem da Net. Teremos de escolher necessariamente um imagem bem pequena e definir no seu estilo que não pretendemos que ela seja visível já que a sua função é apenas testar a ligação:

<img style="display:none" src="http://umsite.com/imagempequena.gif"
 onerror="mostra_erro()";>

A função “mostra_erro()” é desencadeada se a imagem não for encontrada, isto é se não existir ativa uma ligação à Internet.

Estilizar ‘à la Android’ a mensagem de erro

Para criar uma reação ao erro consistente com aquilo que um utilizador do equipamento esperaria, agora só precisamos estilizar de acordo com o ‘look and feel’ respetivo a caixa de alerta. Primeiro a função:

<script type ="text/javascript">
function mostra_erro(){
document.getElementById('nocon').style.display='block';
document.getElementById('cortina').style.display='block';
}
</script>

Neste caso vou criar uma caixa de alerta com o aspeto típico do Android. Isto, refira-se mais uma vez, sem usar as bibliotecas nativas da aplicação mas apenas CSS3 e Javascript (não, o jQuery também não é aqui preciso para nada; lembrem-se: quanto mais leve, melhor!).

Como se pode ver a função torna visíveis duas divs: a “nocon” que contem a caixa da mensagem e a “cortina” que, como o nome indica, cria um efeito de fundo, escurecendo todo o ecrã por detrás da mensagem de alerta.

A “nocon” contem o código que executa o reencaminhamento após a mensagem de erro:

<div id="nocon">
	Sem ligação à Internet
	<div id="nocon_bz">
	<a href="index.html">
		<div id="popup_but">OK</div>
	</a>
	</div>
</div>

Neste caso o redirecionamento é feito para a página “index.html”. Agora apenas tem de não esquecer de criar na sua folha de estilos Android as definições destes seletores de modo a eles ficarem com o aspeto que teriam numa aplicação nativa. Olhando para o ecrã, não se nota a diferença .

No artigo seguinte vou mostrar como isto se faz de uma forma bem rápida. Portanto já sabe: descomplicar é a solução. Embora por vezes seja preciso usar a programação em linguagem nativa, se isso for possível evitar, pelo menos em parte, usando a framework JS / HMTL5, tanto melhor. Neste caso, resolvemos de uma forma simples o nosso problema: avisar o utilizador se não está disponível uma ligação à Internet.