I have a demo app which is supposed to be an example of creating an offline APP that works on mobile devices. I have created a manifest file and am serving it with the correct MIME type, but the main image in the app is always fetched online and if I go to airplane mode, the image doesn’t load despite being in the cache.
Why is the image not in the offline cache?
Update
I now have a valid app cache manifest, but on the iPhone I randomly don’t get the main image still – even when online. I have a manual refresh button that normally gets the image on the second or third attempt, but when I open the app from the home screen it has a ‘?’ placeholder instead.
Update
I have simplified the example a lot and incorporated lots of suggestions, but still have the problem. Here are the steps I have tried so far.
-
Removed the JavaScript entirely – the page just displays a static image
-
Replaced all images with files less than 25kb
-
Added a
NETWORK: *to the manifest -
Moved
NETWORK: *to be above theCACHE:header. -
Tried renaming “manifest.appcache” to “cache.manifest”
It works in Firefox in offline mode with the disk cache empty (i.e. to ensure it can only use offline cache!) but still shows the dreaded blue question mark on IOS (tested on iPhone 4s).
After a great deal of trial and error I can confirm that I have solved the issue.
The answer is strange, but I have double checked to ensure that making this change alone causes the issue to appear / disappear.
The following meta-tag is normally recommended if your app is going to be added to the IOS home screen:
But actually, don’t add this. Removing this tag from my demo app fixed the problem instantly on IOS 5.1.1 – so you need to decide whether you MUST have offline cache or if you MUST have full-screen style, rather than running in Safari.