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

Question

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 whitelisted.

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?

Answer 1

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