HTML5 web app not caching when added to home screen in iOS
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 manifest
as that what was in the HTML5 Mobile Boilerplate.
Added:
NETWORK: *
to the appcache file. I believe this allows everything to be downloaded as well as making all links work.
- I've tried removing this line:
<meta name="apple-mobile-web-app-capable" content="yes">because I read here on SO that is solved a problem similar to mine, but I can confirm that it does not work in my testing. Removing this line or setting the content to "no" when pressing on the home screen icon will redirect to Mobile Safari and not open fullscreen.
I've pretty much narrowed it down to it being a bug in iOS 6 (I'm actually using iOS 6.0.1), because I know that data has now been separated for web apps in the browser and those added to the home screen. I'm posting this issue here to see if any other developers have encountered the same issue.
Answer
I've solved this issue. I recommend the following for home screen web apps in iOS 6.
For testing purposes, use the Web Inspector and a nice JS script like Jonathan Stark's to know when the app has been cached in Mobile Safari:
After it has been successfully cached, add the app to your home screen and leave it open in order for it to cache the home screen version separately. It has to fully cache in order for it to work offline.
Since my app cache is 22mb of data and the caching of the data is SEPARATE for the web app, the problem I had was not leaving the home screen app open long enough to cache.
This is terrible as far as user experience goes, but also good that the data is separate. I can confirm this because if you delete the website data from Safari, the home screen web app will still function.
As far as I know, there isn't a way to debug the data cached for the home screen web app, or where it is stored.