There’s been a lot of speculation online about whether or not Apple’s web-app-capable meta tag
<meta name="apple-mobile-web-app-capable" content="yes" />
is causing a bug with offline caching and the use of the manifest file to create offline web apps on the iOS devices. The truth is, there is no bug, and it is not Apple’s “limitation”, as some call it, on creating web apps that can go offline to seem more like native apps. I too thought there was a problem with it, but after being reassured that something like this wouldn’t go unchecked, I figured out how to fix it.
The fix is simple, for someone who is developing an iOS web app to take offline for a while, you’ve probably messed with your manifest and other files a lot. You’ve probably also done a lot of testing on your iDevice. Now you probably realize that the manifest works perfectly in Safari or Chrome, but there’s one error: It doesn’t work offline when you try it on your iDevice now that you’ve added that horrendous meta tag.
Well, it’s not that hard to fix it. In my opinion it’s a pretty dumb fix, but this should tell you that it is indeed possible to have that meta tag in your offline web app and include a startup splash screen image, no navigation bar, etc. The next time you plan to open your web app and save it to the home screen, do the following first:
- Delete your current web app icon on the home screen.
- Go to settings and clear your Safari browser cache.
- Double tap your home button to open the multitasking bar. Find the Safari one, hold your finger down on it, and exit it.
The next time you open Safari, which I imagine would be shortly, it will seem as if you “reset” Safari, showing you your bookmarks. Just click done and go to your website like normal. Once your files are downloaded and cached, save it to the home screen. The next time you open your web app from the home screen, it should have all the other meta tags you added to make it fancy up and running. If you turn on airplane mode and re-open your web app, everything should be fine and dandy offline also. Anything not working from there is probably your own coding problem, but isn’t related to this meta tag.
The main fix seems to be closing Safari from multitasking, since only doing the first two won’t fix this, but I advise doing all three together just to ensure that it works. If this helped you, please let me know! This solution has worked for me and other people that I’ve developed with, so I hope it works for you also (and want to make sure that it did)!