The expense and lag involved with opening new server connections is especially pronounced on today’s mobile networks. Comet provides an opportunity to improve performance in your mobile web application, especially on the iPhone and iPod Touch, which both feature full-fledged Safari support.

In the interest of brevity, I will use iPhone and iPod Touch interchangeably throughout this article, even in the obvious cases where I am speaking specifically about the iPhone’s Edge network (which the iPod Touch can’t connect to).

Comet provides a highly scalable mechanism for optimizing a constant HTTP connection or series of constant HTTP connections. At this point, you may be wondering, “Does maintaining a constant HTTP connection or series of constant HTTP connections drain the battery any faster than a normal web app? Is it noticeable and or acceptable given the extra features of the app?” During our testing with various mobile Ajax and Comet applications, we have not noticed a dramatic decrease in battery life. That said, I think we certainly need to do something more scientific to determine if the difference in battery drain is 1%, 5%, or 20%.

So how does one go about making their Comet application work with the iPhone? The most challenging part is actually enabling your Comet server setup. Out of the box, Cometd, Lightstreamer, mod_pubsub, Jetty, and Grizzly based applications have all been tested and work as expected. We can certainly provide iPhone users with an even better Comet-based application experience with the following set of application enhancements.

Connection re-establishment

Because of the very brittle mobile network connection on the iPhone, implementing a sane auto-reconnect mechanism or providing the user with a way to easily re-establish a connection (see Greg Wilkin’s article) leads to a great user experience.

Data across the wire

This probably seems obvious, but while iPhone users all have “unlimited” data plans, less data means quicker application response times, and so every character sent across the wire matters. As such, there’s significant reason to re-evaluate the verbosity of the data sent across the wire. As Alex Russell and surely others have said, the best bits are those that aren’t sent. We have not yet been able to reliably determine if the use of gzip has any significant effect on iPhone or iPod Touch performance. Our inability so far as application developers to reliably determine if the device is connecting via Edge or wifi is a significant limiting factor for quick download speeds for iPhone applications.

Vector graphics

Some of the most engaging Comet applications are those that provide real-time charting and data visualization. However, many of these rely on SVG, including those developed using dojo.gfx. The current version of Safari found on the iPhone and iPod Touch is a derivative of Safari 2, and SVG support was not added to Apple’s browser until version 3. This unfortunate and hopefully short-lived limitation, reduces our options for providing these user experiences. Hopefully, a Safari 3 launch will happen concurrently on the iPhone, iPod Touch, and desktop Safari. Even then, it is unclear if there will be performance issues, though the Canvas support found on the iPhone and iPod Touch seems reasonably performant relative to the JavaScript engine performance. Canvas is a less feature-rich alternative to SVG (discussion of problems with SVG compared to Canvas), but may be our only option for the present.

Small screen user experience

The iPhone has by far the best browser of any small screen mobile device, due to its ability to render regular websites while providing zooming, panning, and other touch gestures to allow better interaction. While the iPhone works with most user interface metaphors, some are problematic (including drag-n-drop, multi-select, and key event capturing), some are difficult to use (such as tag clouds and clusters of links), and some are just better rethought for a small screen in spite of the iPhone’s remarkable capabilities. Taking a look at the iPhone and iPod Touch native form user interface enhancements instead of using custom widgets is often a good idea. For example, the Dijit select box replacement is slower and not connected to some of the native system events when compared to the native select box. It is also possible to trigger the different iPhone keypads by including phone or zip somewhere in the field name to get the phone or numeric keyboards.

This article would not be complete without a working example. At SitePen, we recently updated the Cometd chat demo to work well with the iPhone. Out of the box, the existing Dojo 0.9-based Cometd chat demo worked, but not as well as it could on the iPhone. The following adjustments were made to the original source to optimize the chat client for the iPhone:

• convert behavior calls to dojo.connect()–made the app 100% Dojo and reduced the load size by around 8K
• hide the large url bar after the page loads by using Joe Hewitt’s trick:
  setTimeout(function(){
window.scrollTo(0, 1);} , 100);
• clean up the user interface by using the CSS and image from Joe Hewitt’s iUI library for the title bar. This added about 180 bytes to the page size
• prevent the need to zoom and pan by setting the viewport meta tag to size the page correctly for the iPhone
• move the chat input box to the top of the screen so that it will always be visible even when the keyboard is displayed in landscape mode
• use the onblur() event to send chat messages when the user clicks the done button from the keyboard
• revers the order of chat messages so the newest are at the top of the page, allowing users to see the latest messages while typing their own response

A couple of additional improvements that can easily be made include:

• use the trick to keep the keyboard always displayed on the screen, making it easier to send more frequent chats
• update the user-agent string detection to support both the iPhone and iPod Touch

Following the steps outlined here will allow you to improve the user experience, providing responsive, usable, real-time applications for your users.