Intro

When the iPhone concept started taking shape at Apple, installed apps were not given much consideration. No plan existed for an installed app marketplace because the WebKit-based iOS Safari mobile browser would be able to do all the work,* thus allowing web apps to be written in a unified standard. And that unified standard would be platform-independent; it would also never need a software update.

* WebKit is the code-base for the DOM and layout rendering engines in all versions of Safari, Chrome, Android’s “anonymous” default browser (it’s even going to be powering your cable box in the coming years).

The application would be served over the network in realtime, from static html files, eliminating the need to push software updates to users, and providing a unified interface through an open-source standard architecture — HTML, CSS, and JavaScript. The “web stack” can run an application entirely in the browser, without the need for server side programming. And WebKit’s HTML5 features eliminate the need for Flash or other browser plug-ins.

There are a lot of other cool tricks you can employ once you have users accessing your web app from their home screen. E.g., display a static image as a loading screen while Safari downloads assets, renders the layout, and processes JavaScript).

The Process

Listed in detail below, these three steps are as follows:

1. Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.
2. Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.
3. Suggest users add your web app to their home screen.

STEP 1: Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.

<meta name="apple-mobile-web-app-capable" content="yes" />
When users are visiting your web app from within Safari mobile, they can choose to bookmark it and add it to their iOS home screen. Using the aforementioned meta tag will remove the bottom browser chrome, but only when users visit your web app via their home screen shortcut. This has been a feature since iOS 2.1 and the official Apple documentation on this is available in Apple’s Safari Developer Library.

STEP 2: Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
No one’s yet discovered a means of removing the iOS status bar while running Safari mobile. Even step one (when fully implemented) won’t do the trick. The only workaround is to use the “apple-mobile-web-app-status-bar-style” with a very specific “black-translucent” setting.

When used with trick #1, this meta tag will force the status bar and browser into separate layer depths — the background of the status bar is set to black, but with only a 50% opacity. So, technically, you’ve got a full screen, but you have to live with the semi-opaque status bar on top of your web pages.

The other two valid values are “default” and “black”, but neither of these create the layering effect like “black-translucent” does.

EXAMPLE: I’ve tried it out on a weather app I’m building — remember to add the home screen shortcut and launch the web app from there.

STEP 3: Suggest users add your web app to their home screen.

So, we want people to use our web apps in full screen mode. This means getting them to add a shortcut on their home screen and launching it from there. If only there were a relatively pain-free way to do this. Fortunately, JavaScript can be used to check and see if an icon already exists on the home screen and — if it’s not there — suggest they add it.

Enter the “Mobile Bookmark Bubble” project. A number of volunteer developers have collaborated to build a small JavaScript kit that does exactly that. On the difficulty scale, I’d say it’s a little more tricky than adding a jQuery plugin — in other words, it’s something most Flash developers should be able to handle. ;)

Conclusion

This method will allow users to experience your web site in full screen mode with no visible browser chrome. Unfortunately, we are dependent on the user to make this happen. If they do follow through, we should encourage them to keep the icon on their home screen. This means we should give them some good icons and make sure they’re right for the phone and easily recognizable. I’ll cover that in another post.