Apache Cordova/ ios/ iPad/ Mobile/ Phonegap/ Tablets

Apache Cordova, removendo os 300ms de delay entre o toque e o click

apache_cordova

Desenvolver apps Híbridas sem a ajuda de um framework que mitigue todas as particularidades nas plataformas é um caso de dependência de várias técnicas, se você está nesse campo à um bom tempo, sabe que essa tarefa as vezes depende muito de bibliotecas e pequenos scripts em Javascript para fazer funcionar de uma forma nativa.

Um dos problemas enfrentados é o famoso Delay dos 300ms, esse problema afeta tanto apps híbridas como as feitas em Titanium, Cordova, etc, como os “site-apps” nos navegadores.

Quando eu começei a criar um aplicativo chamado Gui Brasil em Cordova(Phonegap na época), 2012. Apresentava esse problema, dando uma aparência de lentidão e quebrado, coisa que tirava toda a experiência de se criar algo ao estilo nativo. Na época eu resolvi com algumas técnicas relacionadas a CSS, melhorou, mais não tanto quanto essa solução que vocês vão ver abaixo.

O FastClick resolve esse problema, especialmente relacionado ao errinho do web-kit em dispositivos que tenham navegadores que usam ele como base, assim como o Webkit(WebView) do Apache Cordova.

Antes de chamar qualquer biblioteca no Cordova, você deve esperar o evento “deviceReady”

Inclua o FastClick na dependência do seu projeto.

<script type='application/javascript' src='/path/to/fastclick.js'></script>

E em seguida inclua essa linha abaixo:

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

E como em um passe de mágica, sem precisar melhorar nada na performance, seu App já ganha de cara uns 10% até 20% de melhoria na responsividade do toque para a execução.

One thought on “Apache Cordova, removendo os 300ms de delay entre o toque e o click

  1. Boa cara, eu estava muito incomodado com essa pequeno atraso que estava acontecendo em um dos meus apps, agora eu vou usar essa ferramenta show. Vlw.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *