Convert your website or web app to iOS app
Wednesday, June 15th, 2011 Leave a comment
I’ve been looking at web apps for iOS last weekend, as I was helping a friend with possibly porting his work as a native app. The solution provided by Apple is rather elegant, and very minimal in terms of work required. If your web app is HTML5 and CSS3 compliant, you’re good to go with about 15 minutes work. You’re able to have a web app run from the home screen of the iOS device, and appear to be native. The only flaw at this stage is that JavaScript is a bit laggy at times; this is primarily due to the fact that Apple has upgraded the JavaScript engine for Mobile Safari to the Nitro engine, while apps that run outside of Mobile Safari have not received access to the faster engine (read an unbiased explanation here). Anyways, what to do.
First, we need to hide the Safari components. We do this by adding the following inside the <head>
tag of your normal web page/s:
<meta name="apple-mobile-web-app-capable" content="yes" />
Next, we need to hide the Status Bar. Again, by adding a single line to the <head>
tag of your normal web page/s:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
There are three options for colors you can use here:
default
– the status bar appears normalblack
– the status bar has a black backgroundblack-translucent
– the status bar is black and translucent
If set to default or black, the web content is displayed below the status bar.
If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
The default value is default.
Now, the icon for your app. Presumably, you will want to use the same image as for your favicon, so at least you have the artwork ready to go. It just needs a little tweaking, and we’re away. You’ll need an icon which measures 57×57. You have two options for this, apple-touch-icon
and apple-touch-icon-precomposed
, depending on how you want Apple to handle your icon. The first option tells iOS that you’ve given it a generic icon to which it will add the standard app icon effects (rounded corners, drop shadow, and reflective shine); the second option tells iOS that you are giving it a fully kitted out icon with no need for adjustment. Bear in mind that the icon will always be placed on a black background, and be overlaid with a round-cornered “stencil”; so any transparent elements to the image will appear as black in the final displayed version.
Once this icon is created, place it in PNG format in the root document folder called apple-touch-icon.png
or apple-touch-icon-precomposed.png
. This specifies the icon for the entire website (every page on the website). Now you can link to it with a single line to the <head>
tag of your normal web page/s:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
or
<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>
For more information, check out Apple’s Web App tools, and also their discussion of meta-tags in iOS.
recent comments