This post is a collection of tips I learned while developing GoodDay for the iPhone with PhoneGap.
1. Start with something off the shelf – After “Hello World” I started with using jQtouch as a shortcut to iPhone UI. jQTouch is a jQuery plugin for mobile web development. I’d describe it as a combination of page manager, mobile application theme engine, and a set of UI controls that enable you to easily mimic default iPhone UI.
2. Minify your CSS & script files – Performance is critical.
3. Leverage the jQtouch Tap Event – The tap event is faster than the standard click event because it doesn’t wait the requisite number of milliseconds to register like standard links in Safari. It makes your app feel more app-like. For example:
$(‘#removeGoal’).bind(‘tap’, function()
{ deleteGoal(removedGoal, $(‘#goalID’).val());});
4. Pick Tap or Click for browser testing. Of course you can’t use the tap event when testing in desktop safari so you’ll want to define the click event on the load of the application:
var isiPhone = (userAgent.indexOf(‘iphone’) != -1 userAgent.indexOf(‘ipod’) != -1) ? true : false; clickEvent = isiPhone ? ‘tap’ : ‘click’;
Then simply use clickEvent instead of hardcoding ‘tap’ all over the place.
5. Disable scrolling if you don’t want your header or footer to move.
document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); });
6. Enable scrolling in regions you want to scroll. You may not want the header and footer to scroll, but you may have a list in the center you want scrolling… for which you’ll need something like iScroll because mobile webkit does not provide a native way to scroll content inside a fixed width/height element… which really takes away from the app-like feeling.
7. The onDeviceReady() function is not called when you test in the desktop browser… so you’ll also need to break your initialization code into a function that is called only once depending on how the application is being used. But you’ll want to make sure you don’t try to do too much before the device is ready.
That’s it for now. In the next part I’ll publish some tips about submitting your app to the Apple Store.