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).
Listed in detail below, these three steps are as follows:
- Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.
- Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.
- 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.
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.