To be clear, the web app IS caching and is working fine offline in Mobile Safari.
The problem is when it is added to the home screen on an iPhone 4s and iPad 2, both running iOS 6.0.1. It won't work offline and gives a network error to connect to the internet i.e. "Cannot open MYWEBAPP. MYWEBAPP could not be opened because it is not connected to the internet"
I've been debugging this for several hours and can't seem to find a solution. I'm not receiving any errors in the console and I'm running Jonathan Stark's debugging code
I've tested the app in desktop Safari, Chrome and Firefox's developer tools both Online/Offline. As well as Web Inspector with the devices in Safari. The result is the same on either iPhone or iPad. They will both cache the web app and will work in Mobile Safari, but not when added to the home screen. No errors either offline or online.
As far as I know, I'm using best practices:
Added HTML header:
<html manifest="photo.appcache">I've also experimented with using different names for the manifest file including: cache.manifest and offline.manifest as I read that it makes a difference, but in my testing it does not matter what the name is as long as the extensions are .manifest or .appcache and is served appropriately in the .htaccess file.
Added correct MIME types:
AddType text/cache-manifest appcache manifestI've also tried:
AddType text/cache.manifest manifest,AddType text/cache.manifest .manifest manifest,AddType text/cache-manifest .manifestI don't believe this worked:
AddType text/cache.manifestbut I don't remember. For the most part it didn't matter and I stuck with:AddType text/cache-manifest appcache