Running the iPad Simulator with the PhoneGap Command-line Tools
The PhoneGap command-line tools are very nicely done. Once you have installed PhoneGap, creating a new project is as simple as:
/path/to/phonegap/lib/ios/bin/create /path/to/myproject com.example.myproject myproject
This generates a fully functional PhoneGap application in the directory you specified. To run the application you just need to install ios-sim, the command-line launcher for the iOS simulator. Assuming you already use Homebrew:
brew install ios-sim
Now you can run your new project in the iOS simulator.
cd /path/to/myproject
cordova/run
This will build the application and launch it in the iPhone simulator. You don’t even need to launch XCode!
What if you want to simulate an iPad application?
Essential PhoneGap CSS: WebKit Touch Callout
When I wrote the first couple of versions of the Outbox iPad application, I was learning PhoneGap development (and by extension, mobile web development) as I went. I was pretty pleased with the app, so I wrote up a list of 10 tips that helped make the app look and feel like a native app. One of the readers who stopped by was kind enough to add a few pointers of his own in the comments, and one of them was -webkit-touch-callout. I was very glad he pointed it out, because I had not heard of it and was not using it yet!
Fast Touch Event Handling: Eliminate Click Delay
Mobile WebKits attempt to synthesize touch events into into click events. These same browser engines also have a double-tap-to-zoom function. This brings up the issue of distinguishing between a tap and double tap. What is a WebKit to do?
The answer is pretty simple. WebKit adds a small delay of 300 milliseconds after a single tap to see if you will tap a second time. If no second tap happens within 300 milliseconds, the gesture is interpreted as a single tap which is subsequently translated into a “click” event.
Disable Pinch and Tap Zoom
Many web pages do not fit nicely into the horizontal display area of smartphones and tablets. Modern mobile browsers compensate for this by allowing you to zoom and pan, so you can read and interact with these pages.
This is a nice feature to have while browsing the web on your phone, but it can quickly detract from your PhoneGap app’s user experience. Nowadays, PhoneGap disables zooming by default when you create a new application. If for some reason PhoneGap’s defaults were not set when you started your project, you can disable zooming and panning by adding the following meta tag to the head of your HTML document:
Performance Testing iOS PhoneGap Apps
PhoneGap apps tend to have a bad reputation when it comes to user experience, and for the most part this is due to poor performance. Nowadays, I often hear about teams starting work on a mobile app, and there is inevitably a debate about whether to go native or hybrid. The argument on the native side is usually something like this:
We cannot compromise on user experience.
Demanding the best user experience is a good stance to take. However, there are plenty of successful PhoneGap apps out there in the wild right now. You just don’t know that they are PhoneGap apps because once an app reaches a certain level of performance, customers are happy and it doesn’t matter how the app was developed.
Essential PhoneGap CSS: WebKit Tap Highlight Color
When you operate a web browser with a traditional mouse and keyboard user interface, you have a mouse cursor hovering over the page to provide feedback about what you will click if you press the mouse button. However, when you operate a web browser with a touchscreen, there is no cursor, and since links are often small bits of text that are completely covered by a finger, you will generally have less accuracy with a touchscreen when tapping a link. In order to help improve accuracy mobile browsers will highlight a tapped link with a transparent gray outline so that the user knows what link is about to be followed.
For example, suppose you have the following link in your HTML: