Facebook Twitter Gplus LinkedIn RSS
Home HTML Solved: apple-mobile-web-app-capable Manifest Error
formats

Solved: apple-mobile-web-app-capable Manifest Error

Published on July 27, 2011 by in HTML, iOS

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:

  1. Delete your current web app icon on the home screen.
  2. Go to settings and clear your Safari browser cache.
  3. 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)!

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
9 Comments  comments 

9 Responses

  1. jim

    hey, done this several times, to no avail. my script runs fine from firefox’s cache when i run in offline mode, but not when i turn off my ipad wifi.

    any suggestions?

    • Hey jim!

      As a starter, I try not running from Firefox’s offline mode, but instead try turning off wi-fi on your computer altogether (although this may seem redundant, I feel Firefox will cache just about anything to let you view the last seen page, so it might give false signals that it’s working.)

      If you haven’t tried yet, I would also use the manifest cache status script located here on your page: http://www.offlinewebapp.com/manifest/cache-statuses/
      just to ensure that the manifest fully downloads and caches in the console logging of your browser (you can delete it after).

      If that still doesn’t work, would you be wiling to give me a link to your site so that I can check it myself? Let me know if you would like me to take a look. Good luck!

  2. Craig

    Hey Jeffery,

    Thanks a million for this, I’ve been staring at my appcache file all night trying to figure out where it’s failing (worked fine on Safari desktop, failed on iOS).

    I stopped short of the whole procedure because it’s an inhouse app for some pretty dumbass people so asking them to do this would have caused a world of pain, so simply shut down Safari on the iPad.

    The app worked immediately. Who’d have thunk it.

    Thanks again.

  3. Sarah

    you saved my life mate!

  4. Es de agradecer este post es de los pocos que he encontrado en los buscadores que es correcto

  5. Andre2Nice

    Hello,

    Sorry for my bad English, but it’s a Google translation.

    The solution does not work for me. When I look at my apache log, I see that it always loads the images, with a return code 200 instead of code 304 that we should have.
    Do you have an idea?

    Thank you in advance.

    André.

  6. Andre2Nice

    Hi,

    Now everything works fine.
    Maybe the cache has been slow to fill up (my site weighs 30MB (many images))

    Thank you for your help.

    André.

  7. Andrii

    Does not work for me :( Did this multiple times. Works from mobile safari, but not from bookmark on home screen.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>