Creating a native IOS application for your website will be a challenging task if you’re not familiar with Objective C. These are the few tweaks which will make your web application look-alike the native IOS application with existing HTML and CSS knowledge.
Adding a Custom Web Page Icon for IPhone/IPad Home Screen
Adding a website icon is easy, you can use any graphic to create icon of your website. The beauty with iOS is that you don’t have to think for the glossy finish and the rounded corners; it’s automatically added by the device.
However if you want to customize your icon your way, you can use a precomposed image.
This is the image of techcrank.com.
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"/> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
or for a precomposed image
<link rel="apple-touch-icon-precomposed" href="/ apple-touch-icon-57x57.png"/> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
Adding a Splash Screen-
Like native iOS applications web applications can also have a start-up image. By default, the splash screen shows the screenshot of the web application the user visited last time. For adding a splash screen you can add this to your code.
<link rel="apple-touch-startup-image" href="/startup.png">
Hide Safari Components-
If you want to hide the safari interface elements from your web application, just add the code-
<meta name="apple-mobile-web-app-capable" content="yes" />
Preventing scaling-
If you want to disable pinch to zoom in your web application and prevent scaling use the viewport Meta tag:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Caching application files-
If you want to make your web application to work offline, or you want to improve its load time create a cache manifest file and link it to the main page of web. When a cache manifest is in use the web application launches with the last version.
With these techniques you can make your web application look alike the native iOS app. These tips would work for the home screen saved applications. Remember to use ajax in your web applications as without ajax oriented applications it would open any links in safari and you will lose any settings.
{ 4 comments… read them below or add one }
super duper like i tried on my friend phone thanku guys
Hi, I can’t see the Caching Application file codes
is this the right code ?
…
Hey buddy,
As cache manifest itself requires detailed explanation I am doing a tutorial on it. The rest of the code is good. I have implemented it on the website.