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).
Add a website icon to your Home Screen You can add a website icon to your iPhone Home Screen for quick access. , scroll down the list of options, then tap Add to Home Screen. The icon appears only on the device where you add it.
Tap near the bottom in Safari to reveal the toolbar. Tap the share button (a square with an upward arrow) followed by the Add to Home Screen option. Some websites supply an icon; for others, a shot of the current view is used. Tapping the icon on your Home Screen launches Safari and takes you to the website directly.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With