Many people are perplexed by the absence of instant messaging on the iPhone. Apple has done great things for SMS with their ichat styled interface. Unfortunately they stopped short of providing a seamless IM experience. Hopefully Apple will add these features in a future software update.
The iPhoneDevCamp in San Francisco last weekend saw several groups working to fill the IM gap by building iPhone compatible IM web applications. I spent part of my time there revising the existing cometd chat app to work well on the the iPhone. Comet’s long-running http connections are ideally suited for chat apps as it provides very low latency. We had already tested cometd on the iPhone, so I was encouraged about the ease of porting the existing chat demo.
I started with the existing dojo 0.9 chat app. It functioned on the iPhone without modification. However some changes to the user interface were needed to make it usable on a small screen:
- converted behavior calls to dojo.connect()–made the app 100% dojo and reduced the the load size by around 8K
- used the Joe Hewitt’s trick–setTimeout(function(){window.scrollTo(0, 1);}, 100);–to hide the large url bar after the page loads
- Used the CSS and image from Joe’s iUI lib for the title bar. This added about 180 bytes to the page size
- Set the viewport meta tag to size the page correctly for the phone and prevent the need to zoom and pan
- moved 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
- used the onblur() event to send chat messages when the user clicks the done button from the keyboard
- reversed the order of chat messages so the newest are at the top of the page. This way users will be able to see the latest messages while typing their own response.
The final result is weighs in at about 100K. On Edge that is about a ten second load time. The largest pieces were the 70k for dojo.js and 20K for cometd.js. If gzip compression was turned on then it would be a lot less–24K for dojo.js and 5K for cometd.js. While heading to the airport after iPhoneDevCamp concluded
Check out the live demo of iPhone chat. Because the iPhone does not currently offer a mechanism for screen or video capture, the movie was was recorded using mini-dv mounted on a tripod. If you plan on doing a demo of your app on a iPhone or other mobile phone to a large audience make sure to use a camcorder mounted on something solid.
Hopefully Apple will release a fully integrated IM app into their existing SMS app soon. Until then low latency http solutions like comet will help fill the gap in the iPhone application suite.