Notes on Fastclick for Android devices


#1

Hi everybody,

i’m writing this post to sum up some little research i did about click events on mobile Meteor apps.
This is not strictly related to Meteor but i like to share it on meteor forum too :slight_smile:

As you may know each click event on mobile platforms is automatically delayed of 300ms to allows to capture the double click event.
Usually we just want our app being faster than that, for this reason it is possibile to use the precious Fastclick package by percolate that is a simple wrapper of the original source by FT Labs.

As it states:

This package is included by default on all Meteor Phonegap/Cordova apps. If you would like to use Fastclick for mobile web as well, add it to your app directly with meteor add fastclick.

Now it comes the pain (and the tests as well) :

On my Android (4.4) i tested the fastclick thing in my app and

  • on the default mobile browser IT DOES NOT WORK
  • on the cordova version IT DOES NOT WORK
  • on the chrome browser IT DOES WORK

So i tried to dig a little bit more and i’ve found this :

This issue reports that fastclick DOES NOT WORK on Android webview browser (how frustrating!) and the only workaround is using the touchstart event:

$('#myid').on( 'touchstart', function ( startEvent ) {
};

I did not test this solution yet but i started to think how to make my code base compatibile to desktop browser too and i found this http://stackoverflow.com/questions/18201361/how-to-replace-click-with-touchstart-on-ios-devices

In particular i quote :

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

This will trigger click on non-touch devices and touchstart on touch devices.

When that is said, I will strongly recommend using Fast click instead, and use regular click-events. With the above solution, you will trigger "touchstart" on links when you swipe on it to scroll the page for instance - which is not ideal.

So, at the end of the day, it seems that using touchstart could be a workaround for the issue but it breaks the scrolling behaviour of the app… not a fair conclusion :confused:

Well this what i have found so far, i hope this could be a good starting point to bring the tests one step forward.

If someone knows another solution already exists i would love to hear him :slight_smile:

Thanks for reading!


#2

I’m also interested to see if anyone has found a solution for this!


Improvements to mobile support
#3

@giggioz wondering if any more info on this, please?
I seem to have done something to my project to make Android stop listening to my clicks.

My iOS app works fine… it accepts touch as clicks. The Android Emulator works fine too. Your work around works too.

However, on the Android physical devices it’s does not work. I tried your workaround and deployed to 2 two physical local Android devices (one 4.4.4 and one 5.0.1) and they won’t accept click on buttons. Links (hrefs )work fine.

My previous APK (in Playstore) works fine on those same physical devices… and all the updated to the server and deployed via hot-reload seem to work too. So it’s just the current version freshly installed on to the physical devices. So I am thinking it’s some Cordova plugin or update to a Cordova plugin… or more likely something else I have done???

I do see the following in the log, not sure if it’s related:

Launching application...
LAUNCH SUCCESS
Command finished with error code 0: /Users/adamginsburg/Documents/Development/buzzy7/.meteor/local/cordova-build/platforms/android/cordova/run --device
I20150713-21:16:26.899(10) (android:meteor_cordova_loader.js:12) METEOR CORDOVA DEBUG (meteor_cordova_loader.js) Error reading version file Error: Failed to resolve entry: file:///data/data/buzz.buzzy.my1/files/meteor/version
I20150713-21:16:26.900(10) (android:meteor_cordova_loader.js:12) METEOR CORDOVA DEBUG (meteor_cordova_loader.js) Couldn't load from the manifest, falling back to the bundled assets.
I20150713-21:16:27.073(10) (android:meteor_cordova_loader.js:12) METEOR CORDOVA DEBUG (meteor_cordova_loader.js) Loading from url: http://meteor.local

Any ideas, pls?