Creating a Mobile Web Application on the iPhone and iPad
Last Updated -
What seems like one of the least known features in the mobile web space is the ability to create a web app on the iPhone and iPad. If you hit the 
button in mobile Safari you will have several options. One is “Add To Home Screen”. This gives you the ability to add a bookmark to the home page, making it easier to launch the site. It can also put you on equal footing with native apps.
Having a home page icon, even if it is a simple screen shot is nice. But there are several things you can do to make this feature give you even more leverage. You can add a META tag to designate your application’s icon. There are two more META tags you should also add, apple-mobile-web-app-status-bar-style and apple-mobile-web-app-capable. These two META tags will drive the experience to be like a native application. You also need to set the Viewport to match the device’s width in the page’s Header. This you should do for any mobile targeting web site. The last feature you should probably add is some code to let your user’s know they can add the application to the Home Screen.
Adding an Apple Touch Icon
Having a proper icon on the device’s home page is a big deal when you want to establish your application. iPhone and iPad allow mobile web developers to designate the icon used with the apple-touch-icon META tag. The Apple Touch icon is similar to the favicon, but better. Where the favicon designates the icon to be used in desktop browser’s address bar the Apple Touch icon is used on the iOS home screen and sits with the native app icons. Ultimately the end user experience can be a native app experience.
If you download the Mobile HTML5 Boilerplate it includes the proper META tags as well as Touch Icon placeholder images. This should serve as a good starting point for your application. From there you should design a proper icon to represent your application. You can do this in any graphic editing tool, like Paint.Net or Photoshop. There are also a few online tools, but so far I have not been impressed enough to recommend any of them.
Can You Spot the Touch Icons for The 2 Mobile Web Apps?
The Touch Icon is a key feature of a mobile web app, but there are still more features to implement to fully create a web app.
The Apple Mobile Web App Meta Tags
The next META tags you should add to your application tell iOS to run your web application like, well an application. The apple-mobile-web-app-capable tag says, I am an application treat me as such. So when a user has added your web application to the desktop and they touch your icon (see above) the application will launch as a native application, without the Safari browser chrome.
<
meta
name
="apple-mobile-web-app-capable"
content
="yes"
/>
When the web application is launched using this feature the device’s status bar is still displayed. You can designate if the bar is translucent black or black using the . If you use the black-translucent the application will display using the full screen with the status bar overlaying the top few pixels of the application. If set to default or black the application will be display below the status bar.
<
meta
name
="apple-mobile-web-app-status-bar-style"
content
="black"
/>
The only drawback to this technique is the application is run using a previous version of the Safari JavaScript engine. The only reason I have read as to why is Apple claims there is a security reason for this. Personally I have not noticed any issues to date, so I am not currently too concerned about this.
Notifying the User To Add A Web App To The Home Screen
Finally, to bring this all together it helps to tell your user they can add your web application to their home screen. After all if they don’t add the application to their home screen all these advantages do not materialize. As main stream apps like Amazon’s Kindle and Financial Times web apps launched earlier this year I noticed they helped users add their apps to the home screens.
Matteo Spinelli has created a nice little script to invoke this prompt. It works for both iPhone and iPad.
So I hope this post helps you make your web applications more native. While Apple seems to be the only mobile OS provider that has grasp these concepts you can add a nice icon to the home page on your Android as well. It does honor the Apple Touch icon META tag. Sadly Microsoft does not have anything similar available for Windows Phone. Personally this is a big deal and both Google and Microsoft really need to jump on and extend these features. For example opening up the live tile feature to web applications should be a no brainer for Microsoft. I am not holding my breath and fully expect them to ignore this potential competitive advantage.