Install webapp to homescreen on iPhone?

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.

Answer 2

See ceejayoz's answer for the various iPhone-specific stuff (icon, fullscreen mode), but in order to store the entire app locally (and run offline), you'll need to look at what's called a "cache manifest". This file, linked to in the opening html tag on your page, lists every resource the app needs to store locally.

Additionally, in order to store user data, if need be, you'll need to look into the client-side database. I don't know as much about that, so I won't try to explain it. :P

Apple has a decent page here: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1

that talks about both the cache manifest and local database storage. This should help explain what you need to do in order to make your application run offline.

Answer 3

Here's another example of what you are trying to do, may be helpful: http://mrgan.tumblr.com/post/257187093/pie-guy