HTML5 Cache manifest in an "added to homescreen" mobile webapp doesn't seem to work

Im' working on a mobile webapp that connects to an online database, loads data from that database in an offline local mysqlite database, and should then be available offline. I got the whole database stuff working, but the app is still not available offline because it does not cache all resources correctly.

My manifest looks like this:

CACHE MANIFEST
# Cache manifest version 0.0.5

http://www.mywebsite.com/appfolder/app/detail.html
http://www.mywebsite.com/appfolder/app/index.html
http://www.mywebsite.com/appfolder/app/list.html
http://www.mywebsite.com/appfolder/css/style.css
http://www.mywebsite.com/appfolder/src/iscroll.js
http://www.mywebsite.com/appfolder/js/jquery-1.5.1.min.js
http://www.mywebsite.com/appfolder/thumbs/1872A.jpg
http://www.mywebsite.com/appfolder/thumbs/1913.jpg
http://www.mywebsite.com/appfolder/thumbs/1916.jpg
http://www.mywebsite.com/appfolder/thumbs/1925.jpg
http://www.mywebsite.com/appfolder/carsimages/1872A_1.jpg
http://www.mywebsite.com/appfolder/carsimages/1872A_2.jpg

NETWORK:

# All URLs that start with the following lines
# are white开发者_StackOverflowlisted.

CACHE:

# Additional items to cache.

FALLBACK:

The app runs smooth while online, but once I go offline I get these error messages: "Myappname could not be opened because it is not connected to the internet" (in "added to homescreen"-view on an iPad) and "Safari cannot open the page because it is not connected to the internet" (in safari-view on that same iPad)

Steps I already took: Made sure the manifest got served by the correct content type by adding this to my .htaccess file

AddType text/cache-manifest .manifest

Any ideas why this does not work?

For the iPad, the cache manifest file MUST BE named as "cache.manifest". This fixed the issue for me.

If you are connecting to an online resource, I would expect to see the URL to that resource in the NETWORK section. Every URL accessed by the application needs to be listed in the manifest either explicitly or implicitly.

Try adding:

NETWORK:
*

To indicate that any URL might potentially be accessed while online.

The resources must be under the CACHE section. See http://www.html5rocks.com/en/tutorials/appcache/beginner/

I am curious about Liz Daly's answer. I am using an iPad which I just (regrettably) updated to iOS 4.3 from iOS 4.2. I had an HTML5 offline app working fine which can run from Home Screen without needing an Internet connection and be able to save state into the localStorage store.

After I updated my iPad to iOS 4.3, this very app now does NOT work without having an Internet connection to reload the page each time I start it from the Home screen and also, the localStorage gets wiped out when I power off the iPad.

So, I am having REAL problems with Safari running my offline app on iOS 4.3 on my iPad and there is no news from Apple when or if they are going to fix this issue (at least restore it back to the same functionality in iOS 4.2).

Update to my previous post. I can now run my HTML5 offline app on my iPad. First I believe you will need to update the iPad to at least 4.3.2 (unconfirmed but I am using 4.3.3 now). And more importantly, the cache manifest file MUST BE named as "cache.manifest". In my experiments, if you use any other name, then it will not run offline. I have my offline running in full screen mode (i.e. set "apple-mobile-web-app-capable" to "yes") and it will run from the Home Screen in Airline mode.

So Liz Daly is partially correct. The offline mode seems to only work under the above constraints only.

I had the same issue on iPad. Turns out that it does not like cache manifest files in a folder. I had /Content/cache.manifest and it did not work (the app wouldn't load from the home screen when offline). When i moved the manifest file to the app root and changed manifest reference to cache.manifest it started working.

(It does not have to be called cache.manifest - i have it working with CacheManifest.ashx)

I understand that in iOS 4.3 the HTML 5 "offline web app" function is broken:

http://www.theregister.co.uk/2011/03/15/apple_ios_throttles_web_apps_on_home_screen/

What's more, such "home screen web apps" can't use various web caching systems, including the HTML5 Application Cache, which means they can't be cached to run offline.

Also see: Offline iOS web app: loads my manifest, but doesn't work offline