Tutorial Details
- Technology: iPhone (iOS)
- Difficulty: Beginner
- Completion Time: 15 Minutes
iPhone Web Applications are underestimated in iPhone development. However, they are surprisingly easy to setup. The process only requires a few Meta tags.
Step 1: Looking at the Web Application
It is best to build the web application first and then move onto configuring it into an iPhone Web App.
The application itself, in this case, is a simple page which tells the time. Accordingly, the app is named ‘Time’. It uses jQuery to achieve the final result. I have used the jQuery Clock plug-in to do this in just a few lines of jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#jclock').jclock();
});
</script>
Step 2: Setting the Application Name
This is perhaps the simplest of all steps. All that is needed is to change the Title tag to the name of your web application.
<!-- Page Title --> <title>Time</title>
Step 3: Setting the Application Icon
The next step is to set the application icon. This is the 57px by 57px icon which appears on the home screen of the iPhone. On retina display devices, this is a 114px by 114px icon, and you can accomodate for both simply by using the higher resolution icon instead (older devices will auto-resize it down). I am going to use the following icon for this tutorial:
There are two options to setup this icon. The first is to use the icon as is, all that is added are rounded corners. To do this we use this Meta tag:
<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
The second option gives the icon the standard Apple gloss:
<link rel="apple-touch-icon" href="img/icon.png"/>
I chose the precomposed icon and the final result is as follows:
Step 4: Setting the Splash Screen
While your web application is loading, you can choose to have a splash screen displayed. This image should be 320px x 460px. To set this up, use this Meta tag in the Head of your document.
<link rel="apple-touch-startup-image" href="img/splash.png" />
This is the final result of the splash screen.
Step 5: Make the Application Full Screen
The next step is to remove the default Apple toolbars and menu bars. These are the ones which show the web address and search at the top and which show the bookmark, back and forwards buttons at the bottom. This is done with the following Meta tag:
<meta name="apple-mobile-web-app-capable" content="yes" />
Step 6: Setting the Status Bar Style
You can also set the style of the status bar. This is the bar at the top of the screen which displays information such as signal strength, battery and Wi-Fi signal strength. For this to work, the application must be set to full screen as in step 5. For this Meta tag there are three options.
The first is the normal grey gradient:
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
The second is a solid back status bar, this is mostly the best option:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
The last is a transparent back status bar, this allows the user to see through the status bar:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Our final status bar:
Step 7: Setting the Viewport
This Meta tag tells the device the width of the page to display, the minimum and maximum zoom value, the initial zoom value and whether the user has the ability to zoom in and out. If your website is less than 980px (the default width of the webpage display) then the width should be set with this tag. Also, if the application is iPhone specific, then the width should be set to the width of the iPhone, iPad or iPod Touch. One should also bear in mind that instead of using the actual value of the width and height of the screen, values of ‘device-width’ and ‘device-height’ should be used. Here are some example tags:
<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = no" /> <meta name="viewport" content = "width = device-width, initial-scale = 2.3, minimum-scale = 1, maximum-scale = 5" />
Here are all the available options:
- width – Width of viewport in pixels. [Default: 980, Range: 200 - 10,000]
- height – Height of viewport in pixels. [Default: calculated with the width and aspect ratio of the device, Range: 223 - 10,000]
- initial-scale – The initial scale of the viewport. [Default: calculated to fit the webpage in the area available, Range: calculated with minimum-scale and maximum-scale properties.]
- minimum-scale – The minimum scale of viewport. [Default: 0.25, Range: >0 - 10]
- maximum-scale – The maximum scale of viewport. [Default: 1.6, Range: >0 - 10]
- user-scalable – Whether the user can zoom in and out. [Default: yes, Options: yes or no]
Step 8: Testing the Web Application
We are now done setting up the web application, let us add it to our device.
- Browse to the location of the app on your website.
- Press the ‘plus’ button on the bottom of the screen.
- Press ‘Add to Home Screen’.
- Press ‘Add’
The web application is now effectively ‘installed’.
Conclusion
Now, with your application setup, you will be able to launch it from the home screen and then see the splash screen while it loads up. Once loaded the application should be full screen with your chosen status bar.
Preview the final application by downloading the attached zip file. In order to test it out on your iOS device, you will need to place the code online.
I hope you enjoyed this tutorial and thank you for reading.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Priyesh Patel
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Mobiletuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I’m not holding my breath but I hope apple adds in a meta tag in the future to allow you to adjust the inertia scrolling friction. That and making it easier to absolute position elements would make producing web apps much better.
I don’t have any experience with the add on web app libraries yet, but doesn’t jtouch or something similar accommodate these items already? If jtouch, does anyone out there know of another library?
// Disable app sliding.
function noDrag(e) {
e.preventDefault();
}
well this pretty much obsoletes phonegap, but perhaps not appcelerator titanium
You can still sell phonegap apps in the app store. You cant with this method.
when you click a link it opens the browser window doesnt stay in the “webapp window” anyway to fix that?
Heres a jQuery plugin that could help: https://github.com/mrmoses/jQuery.stayInWebApp
Its a similar javascript solution, but has a few more features. By default it will attach to all links, but you can use it to attach to links with a certain class or something. It also detects iOS full screen mode so that it doesnt get in the way of other browsers and devices.
Interesting to see that the icon is 57×57. I would have imagined that Apple would have set a new standard size after implementing the retina display on the iPhone 4. I know the application icons are bigger than that.
Hello. Thanks for all those tricks.
But how to manage retina icons and splash screens?
no one has any suggestions on how to make links in your webapp open in the same page without opening them in safari? is there a simple javascript way perhaps?
A webapp is not an application. It is a bookmark to a website. Therefore it opens in Safari.
Dade, anytime your web app links to another web page, it will open Safari to view that link. So you need to think about building your web app as a single page rather than multiple pages. If you have a lot of content in your app (too much for a single page), simply use Ajax to load in external data. This will allow your app to show dynamic content and other pages without leaving your app.
Focus on using clever javascript to make your entire app fit in a single web page and your problem will be solved.
thanks,
any idea on a good tutorial for a beginner on how to use java script to load external data?
The replies below are wrong. If you modify your links (using javascript) to target the same window, you can keep them in the webapp.
I’m pasting an example from my phpbb site where I’ve made it a webapp and the traffic stays in the app.
link name
well, apparently, the pre-tag doesn’t alllow me to include code on this site.
The href to links on your webapp should look like this:
a href=”javascript:window.location.href=’LINKED-URL-GOES-HERE’”
Just add the characters back to that line.
Did it really work for you? Not working for me?
Working for me so far! Thanks so much for the tip. Couldn’t find anything in the Apple reference guide. Lifesaver.
I apologize. I got it working. The solution is pretty good. I have been searching for such a solution for a long time. Thanks Bob & others
Great solution! Thanks.
Thanks for the great tut. Is there any way to make the a page or iframe zoomable once the app is launched from the homescreen?
Use this in the Viewport meta tag:
user-scalable – Whether the user can zoom in and out. [Default: yes, Options: yes or no]
Hope this helps
Hello, “the download button” is not working. Could someone help me to download the sourcecode? Thanks.
Dade, you can easily navigate to another page while staying in the full browser window by calling window.location.href=’http://www.yahoo.com’; in javascript.
To open a regular HREF link, within the same WebApp window I made a small script, and used a small line in the ONCLICK event in the tag:
In the HEAD part of your HTML:
function OpenLink(theLink)
{
window.location.href = theLink.href;
}
The link in the BODY part of your HTML:
<a href=”http://www.google.com” onclick=”OpenLink(this); return false”>home</a>
John, I tried using javascript to load windows in the full browser window but it is quite sporadic and annoyingly still then loses the appearance of being a native app when it opens in a new window.
Great tips here thanks! Will try some of the tags in our coming iPhone project.
Would be nice if this topic was updated to include all icon versions as:
normal (iPhone/iPod non retina display)
normal (iPhone/iPod retina display)
and iPad version
This would pass from an excellent topic to a brilliant one ;)
Would be nice if this topic was updated to include all icon versions as:
normal (iPhone/iPod non retina display)
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”/>
normal (iPhone/iPod retina display)
<link rel=”apple-touch-icon” href=”apple-touch-icon-72.png” sizes=”72×72″/>
and iPad version
<link rel=”apple-touch-icon” href=”apple-touch-icon-114.png” sizes=”114×114″/>
This would pass from an excellent topic to a brilliant one ;)
I was wondering if anyone know how to get the splash screen to work on retina, and also how to keep it so that the links stay inside the app.
you will have to be really specific as I have a ridiculously basic knowledge of coding.
Thanks
Splash screen image needs to be 640 x 960 (retina resolution).
As far as links staying in the window, read some of the comments before yours.
So far, the only problem I see, it when you close the web-app, you will loose the session. In browser based web site, the session remains until the time-out clear the session but in web-app mode it will loose the session right away after closing. i.e if somebody call you, you will loose the application flow.
is there any work around?
Sorry, I enter wrong email address. Please reply to this if you get a solution. Thank you.
Dear Expert, I also have the same problem as Mohammad:
“So far, the only problem I see, it when you close the web-app, you will loose the session. In browser based web site, the session remains until the time-out clear the session but in web-app mode it will loose the session right away after closing. i.e if somebody call you, you will loose the application flow.
is there any work around?”
Have anyone got an solution for this issue? Thank you.
You can utilize safaris full HTML5 support in the web apps – this includes the localStorage Object in JavaScript. Store your session data there and it won’t get lost!
I’ll save somebody 2 hours of diagnostic work:
On iOS 3.1.3 (highest my first-gen iPod Touch can go), tags for hiding the safari bars ONLY work if the page is named index.html.
On higher versions of iOS, pages can have any name and these tags will work as expected.
I’m trying to use a few of these meta tage for the site i’m creating but only a few seem to work (viewport and precomposed icon).
Other such as fullscreen, statusbar and startup image don’t seem to work for me?
Any ideas?
Is there a way to detect if accessibility is turned on (ie. VoiceOver) and load conditional CSS accordingly?
The code for adding a icon on isn’t working for me :( any suggestions
This helped me:
http://stackoverflow.com/questions/6429492/how-do-you-keep-an-ipad-web-app-in-full-screen-mode
Is it possible to open a ‘bookmarked webapp’ in iOS via a URL? Instead of opening the Safari-app directly? Your help would be great!!!
Alakazaam-inofratmion found, problem solved, thanks!
where do you add the title for the icon ?
Hi,
Seems that you can’t copy an image while you are in full screen mode, you can only copy text, any solution for this?