Make your website an iPhone web application
These are a lot of tips to make your website an iPhone app so users can save it on their Home screens and access to your site faster.
Specifying a Webpage Icon for iPhone Home
We have two ways to design a custom icon that users can display on their Home screens using the Web Clip feature:
- a simple image where iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:
- rounded corners
- drop shadow
- reflective shine
This is the image for Luscarpa.com:
and this is how it is on iphone home screen:
- an image precomposed, to this image iPhone doesn’t add effects.
This is the image precomposed for Luscarpa.com:
and this is how it is on iphone home screen:
How we can provide this image? There are two ways:
- place an icon file in PNG format in the root document folder called
apple-touch-icon.pngorapple-touch-icon-precomposed.png. With this method you specify an icon for the entire website (every page on the website), - add a link element to the webpage, as in:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
or
<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>
With this code you specify an icon for a single webpage or replace the website icon with a webpage-specific icon.
Hide Safari Components
Add this line if you want that your web app/website don’t show the safari user interface components:
<meta name="apple-mobile-web-app-capable" content="yes" />
Status Bar Appearance
You can change the Status Bar of web app/website using the following line of code:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
There are three different colors:
1default
2black
3black-translucent
NOTE: 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.
Specifying a Startup Image
On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:
<link rel="apple-touch-startup-image" href="/startup.png">
Here an example of my custom startup:
The image must be a png file and his dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes
Standalone Detection
You can develope custom features or effects for your standalone version of site, you can detect it using the boolean var window.navigator.standalone from javascript.
Note & Conclusion
All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.
Is my opinion that if you develop a strongly ajax-oriented web application, so to avoid the users from stressing clicking and page refresh, allowing them to use just the “first page” , all these settings can be make your app amazing.
This website uses these options, you can test them adding it to your home screen of iPhone/iPod Touch, actually I’m using wordpress so there isn’t a customization to load all site with ajax so you can see the home page like web application, but if you click on a post link you will be redirect to safari.
Alex April 21, 2010 22:45:20
Cool! Is it possible to make an offline version of your site or cashed it on iphone?
Luscarpa April 22, 2010 09:33:02
No Alex, you can’t make an offline version, if you use ajax, you can show your web page like an iphone app where user open first page and no links to other pages but only refresh some parts of it. If you don’t use ajax your link open into safari.
Whoever June 22, 2010 19:18:47
http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone
Darrin May 2, 2011 16:44:14
Can one make a button in a mobile website that, when clicked, will create a bookmark, or home screen icon on the springboard of iOS and/or Android?
Doug July 20, 2010 18:30:29
Dave September 23, 2010 22:25:44
The one thing he forgot to say is to make your icon 58 x 58. If you do that and it is a png and linked the way he said ( ), it will automatically put that icon on the iPhone.
matt January 28, 2011 11:58:11
yeah wondering the same thing
Patrick February 21, 2011 16:35:13
Is that still correct for the iPhone 4 (retina display) can you provide two using the _2x.png method in the iOS SDK or a double sized one that shrinks down for other phones?
Carter Barrett August 30, 2011 17:36:52
@Patrick I don’t know for that, but if you make your icon 116 x 116 it will be retina ready
hellonemo July 28, 2010 13:35:05
Cool cool that make looks like native apps
Austin Johnson July 29, 2010 04:03:05
MY new site
Brendan August 8, 2010 01:08:45
Can you use these on blogger? I’m trying but they won’t work! If you can tell me how.
Brendan August 8, 2010 01:10:01
Sorry wrong site!
Brendan August 8, 2010 15:22:17
Did you use wordpress because it won’t work on wordpress either!
Luscarpa August 9, 2010 21:35:41
Because it is fantastic for blog
Luca August 10, 2010 10:06:53
First of all I’d like to congratulate you for your web-designing skills. We’re almost the same age (I was born on 18th December), but I just started learning HTML/CSS, so be patient if I ask N00B questions.
I’d like to know how to add the name under the icon for the website/application. I noticed you have “Luscarpa” as a label – is it a default name? Like, if the website is http://www.cicciopuzzo.it, the label will be “Cicciopuzzo” or “www.cicciopuzzo.it”? Is there a way to set a custom name for the icon?
P.S. Of course I’m Italian, I’m speaking english because I reckon this is a english-only blog.
Luscarpa August 10, 2010 10:43:11
The name of label is set by the user, when you save the web page, the default label is the name of page, but the iphone gives you the ability to edit it.
I prefer use english so everybody can read my articles
Mikey August 31, 2010 11:28:15
Awesome man, thanks very much for this
Ravi September 17, 2010 13:04:32
Nice tips there Luca. Works excellently! I have been interested in writing some webapps myself and wondered if it were possible to make use of iOS native controls in (like the switches, selectboxes, etc.) these, do you have a clue if that’s possible?
Bubbafisher September 24, 2010 22:35:54
How did you create it if is’s not wordpress?
Luscarpa March 11, 2011 08:35:01
You can create this with every cms or custom web applications, the only problem is that if it doesn’t use ajax at the first click you will redirect to safari.
Business Catalyst December 10, 2010 00:36:50
Nice tip! I like interesting offer… It’s like we are in a new world hope this is not too heavy for my site.
Simon December 14, 2010 23:13:40
Does anyone know how to get this to work when using a host service such as MrSite as I cant find my root folder directory or get access to html code for my headers and logos.
Help!!
roberto January 10, 2011 06:49:40
Ciao form Italy,i use iweb ’08 and i true to make an website optimized for iphone, but i have this problem to hide the Safari on iPhone OS UI components when my website is running,because i am new in this…please can you tell me where to put ” ” to Hide Safari Components????PLEASE (can you send an email?)PLESE LIKE FOR DUMMIES.
Don Alex January 11, 2011 21:28:11
First sorry but my english is bad, but I try my best!
I got a website and im used this things:
and it works great. except one thing, if I’m click on a link, the link start loading but not in the “apple-mobile-web-app-capable”-mode but rather in the normals safari app.
what can i do?
thank you
Luscarpa March 11, 2011 08:19:16
You have to use ajax to change some parts of your page, if you make a request of a new page you need to open safari. It works like an app, if you make a request of a site/link this opens safari to show you. The only way to show a site/webapp is to use ajax calls to reload the parts of page that you want to change.
Rob April 7, 2011 11:44:04
A quick fix for an existing site (with prototype.js):
document.observe(“click”,function(event){
var element = event.findElement(“a”);
if(element.href){
event.stop();
location.href = element.href; //this does the trick, page will open in same window
return false;
}
});
This also fixes the click event delegation problem (http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html).
Simone January 24, 2011 07:00:19
Hi Luca,
i’ve got the whole web-app thing going and developed a fairly complex app for a business management program on Ipad. All works fine except one little but very important particular. I can’t print. From Safari, I click on print or create an object with ontouchend=”window.,print” and it works perfectly. From a homescreen web-app, there is not way to trigger the airprint functionality. Any ideas??
Grazie mille per l’aiuto.
Luscarpa March 11, 2011 08:28:17
Hi Simone, I haven’t test this feature, but probably you can’t use safari functionalities because you are running your app into a webwiev and not into a browser. If you know the javascript language, try titanium it’s realy simple and it’s a very powerful development tool to create iphone/ipad/android apps using js/html5/css3.
matt January 28, 2011 09:22:26
cool I think i’ll get started on it thanks
Bob February 3, 2011 02:52:29
Great advice. Doesn’t seem to work with Blogger, though. Any ideas?
Darren Hann February 24, 2011 17:00:35
hi I just wanted to say that I am 12 years old and has made many different webapps that do work offline, if you want to make it available off line, go to your website (on iDevice) then paste this JavaScript code into your address bar:
javascript:void(window.location=’data:text/html,’+document.documentElement.innerHTML+”)
that should help…. now back to making my sisters ‘slide 4 google’ app…
Eric March 6, 2011 00:32:57
Luscarpa, I’ve tried your tutorial and it works great! I’ve been looking everywhere for help with this.
My question is, when I click on a link from within the “app” it launches the link in the browser window, taking the user out of the app, any suggestions?
Luscarpa March 11, 2011 08:31:54
Yes, you launch your webapp in a webview so if you click on a link it starts safari to show you, the only way to avoid this is uses ajax calls to change the parts of your webapp.
vwl April 8, 2011 00:06:52
You do not have to use Ajax to stay on the page, you can make your links into form submits and it will not bring up the safari browser. I use javascript to execute the form from the link.
Jay March 15, 2011 01:59:14
Great tutorial!
What page of the website needs these code snippets added?
1. Create icon
2. Add it to your site images folder
3. Add the snippets to ?
Foppa March 21, 2011 17:28:24
Hi Luscarpa,
nice post!
Do you know if there is a way to skip the “add to Home Screen”-click-button-in-safari process?
Is i possible to add a script/link direct on the webpage and launch/execute the process?
Would be realy nice!
Thanks in advance! /Foppa
hdwebplayer April 1, 2011 11:00:34
Thanks for sharing this information.
Now hdwebplayer support iphone, ipad and Android
Twan April 9, 2011 02:31:06
the startup.png is in my root folder.. but where do I have to paste these codes:
.. In order to get the startup screen?
Twan April 9, 2011 02:32:05
link rel=”apple-touch-startup-image” href=”/startup.png”
meta name=”apple-mobile-web-app-capable” content=”yes”
These were the codes i meant
Priya Sen April 13, 2011 19:25:04
I am developing a iPhone website in wordpress. Is it possible to make it an iPhone Application?
Here is the link of my website http://iphoneappsclub.com.
Roch April 16, 2011 02:33:27
Priya I see no problem in getting your website made into an app. It shouldn’t be that expensive to create either.
Jay H April 23, 2011 14:14:55
Good read. Simple question though, is it possible for someone new to iPhone App Development (ie never have attempted this before) to give this a go? I’ve found a couple of sites reviewing App Development Tutorials and Software and I like what I’ve read….are these recommended and will these really help?
Ashton Schulz May 9, 2011 16:52:10
I am designing a webapp for iPhone to save wallpapers from the app (or just in safari) but when I tap and hold the image it just gives me the copy option. How can I get it to save it to photo album? All help appreciated!
Josh May 16, 2011 01:03:35
Hi great info just a quick question.
Is there a way to give visitors the option of adding your website to their home screen as soon as they arrive on your site via their iOS device?
Neil May 19, 2011 14:13:08
I am looking at providing “Live Results” for a swim meet with them being available in a similar manner as you describe above on an iPhone. – With a custom icon on the home screen.
The method that I was thinking of using is quite simple, but don’t know if it will work under what you describe above.
Quite simply, the software that records the Meet Results can produce them as a .pdf. All I was going to do was have a link on the web site to the .pdf and keep updating the .pdf via ftp as the Meet progressed.
When I save the page to the Home Screen, will it maintain the link to the .pdf so that just tapping on the icon shows the updated .pdf.?
taha May 22, 2011 06:50:35
Hi there luscarpa,
I’m very new to iphone development tools. I created an iphone specific pages on the site above and would like to create an app to link to the site. Where do I start? Do I have to download the SDK or any other development tool to start?
TIA
Adam May 27, 2011 14:42:01
Hi Luscarpa,
I have been developing a web app with jquery mobile.
I just wanted to thank you for providing this tutorial.
They are small hints but very useful!
Harsh May 30, 2011 14:21:41
I am using your approach for running some html pages on iphone but they just got redirected to safari and I want them to run like normal iphone app.
Sajjad Shah June 1, 2011 21:10:25
thanks for share and learn
Incircle Media June 15, 2011 09:49:11
Its really nice article to get help for web app.
Thanks Alex Kessinger, did nice job.
Cheers!
Rob Lang June 16, 2011 10:17:55
Be careful if you are using “apple-mobile-web-app-capable” because you will no longer be able to zoom in and out. If your site isn’t really mobile capable and is really wide, do no use this option.
Alex September 14, 2011 21:11:11
I don’t think your correct Rob, I actually WANTED to disable zoom, which wasn’t automatic for my iPhone 3gs version 4.3.2. The safari documentation said that it would be as simple as
but it STILL allowed zoom. after some digging I applied the following to the document.body, and it finally did the trick (except when a user has moused[finger] over an input, or an input has focus- these override the no-scalable, and preventDefault();)
function touchMove(event) {
event.preventDefault();
}
window.onload=”document.addEventListener(“touchmove”, touchMove, false)”
Source:
developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
That’s kind of a broad stroke though, and I don’t really know what kind of far reaching ramifications it could have to completely squelch the default event. So I’m in no way recommending it…
Martin Phoenix June 24, 2011 11:08:13
Thank you for posting this, I had a client ask me about it recently and now I can give him a suitable answer, and be able to do the work
WIN !
Robin June 30, 2011 18:55:55
i know very little about these apps, but am trying to create one for my website. i would like to create a spot on my website to download an app to any smart phone that would create a short-cut to my phone #. So on their home page there would be my app, that if pressed it would call my phone #
Pouya Kary July 2, 2011 21:17:08
thanks man! that cool and helpful
Ashwin July 8, 2011 13:02:15
Hello Friends,
I would like to know about..how is iPhone safari app development is different then the other smart phone web app development? Will the iPhone safari app compatible with the other smart phones?
thanks for you time…
komedee July 9, 2011 11:23:43
Awesome article, I got this working in under an hour for my dev environment and can’t thank you enough for you input, check out my site in a few weeks and create a login, also thanks for writing it in English, I appeciate it very much.
nicBBB July 12, 2011 07:14:35
Is there a way to solve the following problem: when using the mobile web application with icon and web-capable settings set OK, If I then receive a call and put the application in background, the next time I try to resume my application it starts back from zero and goes back to the startpage in stead of resuming to the page where I left the app. In other words, the application is not put in full suspended mode when you leave the app.
Robin Nixon July 17, 2011 12:07:22
If you want to make fully standalone apps too the info needed is in my book, HTML5 for iOS and Android, which enables you to take web apps created in HTML, JavaScript & CSS, and turn them into standalone apps that you can upload to the app stores (for free or to sell). See http://html5formobile.com – the wrappers to do this for the iOS and Android SDKs are freely available on the website, and you don’t need any knowledge of either programming language if you follow the instructions in the book.
Lucy August 16, 2011 19:52:46
Will HTML5 work for Blackberry as well?
xolela mtabati August 3, 2011 12:13:45
i luv this application!
Miguel Antonio August 6, 2011 21:09:46
Good evening everyone,
Sorry if my English is not so good. I am trying to get into using the XCode I download via the Apple Site. But its still giving me headaches.
So, I understand the way to design website using html/css and have design mobile website for iPhone what I ask is does anyone have an editable piece of XCode where I can amend the logo and the website URL that the ‘iphone web app’ will redirect to ?
Also if there is code to clear off the web address bar to make website look like app – I would be very happy to hear from anyone who might be able to help me in these matters.
Thank you
Miguel
Iori Fujita August 13, 2011 03:50:16
My webpage “Music in the Air” works offline for a while. But soon it disappears.
It uses html5, canvas, audio, javaScript and others.
http://www.geocities.jp/imyfujita/air/air.html
Can I use local stroge or something?
The Highlander September 5, 2011 23:09:32
My web site is way to large to turn into web apps, so I am developing a separate site as an app at http://theHighlander.mobi I have done the part of making the screen icon and get it to work well on the IPhone simulator, do you know how to do this for the Android?
Thanks for any insight you can give….
Social Application Development September 7, 2011 11:24:42
I like and appreciate your work. You are done great job. Keep it up. Thanks for sharing the above post.
anil September 12, 2011 08:09:40
An excellent resource… thanks for sharing it.