June 25th, 2007
Apple iPhone development secrets revealed
As I mentioned before my long vacation at the beach (ahhhh), the iPhone can only be ‘programmed’ by writing web pages that can be viewed on the device. For the most part this involves making sure your web apps work with the resolution of the screen and with the idiosyncrasies of its browser. Thanks to a leak from the WWDC, several details of the capabilities and limitations of the browser are now known, and major Ajax vendors are scrambling to make sure their toolkits will support it.
As Jason O’Grady has noted, Apple is trying to suppress iPhone details by sending takedown notices. The only reason I can think of for Apple to do this is to increase the mystery and excitement surrounding the iPhone. This is par for the course for Apple, and I don’t blame them for hyping it up as much as they can. But developers need information *now*, and most couldn’t attend the WWDC, so here is the development info that I’ve been able to gather so far (thanks to members of the FiGMA and MacRumors forums):
The iPhone will run a version of the Safari browser (419.3, based on the open source WebKit engine), so if your apps work in Safari there’s a good chance they’ll work on the iPhone too. I recommend using a toolkit like GWT which shields you from worrying too much about all the little differences between browsers.
The resolution is 320×396 for the web viewing area in portrait mode. The dot pitch will be smaller than you’re used to, however, so you should avoid hard-coding font sizes.
Unfortunately, neither Java applets nor Flash will be supported in this browser, at least in the initial version. Video and audio is supported through Quicktime (H.264 baseline profile level 3.0). Interestingly, YouTube videos will work on the iPhone, but only because YouTube will recode their videos into H.264 format for the iPhone and Apple TV (instead of the On2 VP6 video format that they use now inside the Flash player). Since H.264 is one of the best high-tech formats available today, we might see better quality video at the same bandwidth. Links directly to movies will reportedly switch the iPhone into full-screen, landscape video playback.
The browser has some limitations most developers are not likely to run into, such as a 10MB max html size for the web page, 5 seconds of run time and 10MB heap allocation limits for Javascript, and a maximum of 8 documents viewed at once (in tabs).
According to conference notes, the iPhone User Agent will be “Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3″. However, that’s the kind of thing that is very likely to change with every new update, so make any regular expressions that match it as generic as possible.
The iPhone will have built-in support for viewing PDF, MS Word (.doc), and MS Excel (.xls) format files. PDF will likely work the best, since that’s a native format for MacOSX.
Telephone-specific urls will, for example, allow the user to click on a link and make a phone call. These include “sms:”, “tel:”, and “mailto:”. In some cases it appears special links are not really necessary. One source says that if a phone number appears anywhere on a web page Safari will automatically recognize it and make it clickable, just like browsers on some other phones.
Here are some more recommendations from Apple to make your content look its best on the iPhone:
- Separate HTML and CSS (that’s good advice all the time)
- Use well structured and valid HTML (ditto)
- Size images appropriately (don’t rely on browser scaling)
- Tile small images in backgrounds (don’t use large background images)
- iPhone supports both EDGE and Wi-Fi. EDGE pipe is smaller than Wi-Fi pipe, so consider bandwidth when developing.
- XHTML mobile documents supported.
- Stylesheet device width: 480px
- Apply different CSS for the iPhone. For example displaying a one column page for iPhone vs. a 3 column page on a desktop.
- There are no scroll bars or resize knobs. The iPhone will automatically expand the content.
- Avoid framesets. Scrollable frames are automatically expanded to fit the content
Bottom line:
Like the Opera-based internet browser on the Nintendo Wii, most developers will look at the iPhone as yet another high-volume consumer-oriented web platform for their pages and applications. As a first pass, it would be a good idea to ensure your apps don’t look like crap on the device. Then if you notice a lot of iPhone traffic or want to target it specifically for some other reason, you can use CSS and user agents to customize your presentation to your heart’s content.
Related info:
Ed Burnette is a professional developer and author of several articles and books about computing including Hello, Android: Introducing Google's Mobile Development Platform, 2nd Edition. For disclosure of Ed's industry affiliations, click here or to view his full profile click here.
Subscribe to Dev Connection via Email alerts or RSS.
