Question

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 1

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.