Want fresh tech tips in your inbox?

How to Emulate Double Tap for Progressive Web Apps (PWA) iOS and Android

       

The double tap event isn't supported in libraries like jQuery Mobile (out of date anyway). But coding up your own function is very easy.

We will compare time in milliseconds between tap or click, events. The reason for both tap and click events is due to inconsistent behavior between progressive web apps on Android, iOS and desktop.

window.tapTime = (new Date).getTime()
$('body').on('touchstart click', '.selector', function(e){
     var delta = ((new Date).getTime() - window.tapTime)
        if( delta < 200 ){
                alert('Double Tap Detected')
        }
        window.tapTime = (new Date).getTime()
    })

You can play around with the delta, but I found 200 milliseconds to feel the most like traditional double tap event.

Tagged w/ #mobile #pwa #progressive web apps #javascript #touch

Apps I've Built

PhotoLocationChanger
Easily change the location on your photos and videos
Click here for more info about the app
PhotoDateChanger
Easily change the dates and times on your photos and videos
Click here for more info about the app
VocabReminder
English dictionary with notifications so you won't forget what you're studying!
Click here for more info about the app
VocabQuiz
The app that quizzes and scores you on your vocabulary!
Click here for more info about the app