Install webapp to homescreen on iPhone?

iphone caching web-applications homescreen iphone-standalone-web-app
Stefan Kendall picture Stefan Kendall · Mar 20, 2010 · Viewed 15.1k times · Source

How do I go about allowing my webapp to be installed as an icon on a user's homescreen? Is the data cached locally, so that the webapp can be run when the user is outside of 3G?

I did a quick google, but my search terms were lacking. I noticed that Google Buzz allowed me to install locally, and I'm wondering what the process is for creating web apps, and if they get special treatment (full caching/running offline).

Answer

ceejayoz picture ceejayoz · Mar 20, 2010

This behaviour is done with a meta tag titled apple-mobile-web-app-capable.

Details (and other meta tags useful for iPhone web apps): https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

<meta name="apple-mobile-web-app-capable" content="yes">

To set a nice icon for your app, you can specify a URL for your icon:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

<link rel="apple-touch-icon" href="/custom_icon.png" />

and a startup screen:

<link rel="apple-touch-startup-image" href="/startup.png" />

Data can be locally cached. You can store data using the various HTML5 JavaScript APIs and cache manifest.

Related questions

What happens to SDWebImage Cached Images in my app when the image file on the server changes?

I am using the SDWebImage library to cache web images in my app: https://github.com/rs/SDWebImage/blob/master/README.md Current Usage: [imageView setImageWithURL:[NSURL URLWithString:profilePictureUrl] placeholderImage:[UIImage imageNamed:@"placeholder.png"]]; My question is what happens once …

Read More
Dispelling the UIImage imageNamed: FUD

Edit Feb 2014: Note that this question dates from iOS 2.0! Image requirements and handling have moved on a lot since then. Retina makes images bigger and loading them slightly more complex. With the built in support for iPad and retina images, …

Read More
Max size iPad / iPhone Offline Application Cache

Anyone knows the max size of Safari's 'Offline Application Cache' on the iPad & iPhone. Looks like it's 5MB. Is there any way to enlarge this size? Offline application cache docs: https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/…

Read More