iOS: Did Apple disable HTML5 offline capability for web apps saved to the home screen?

Question

I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.

If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.

If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.

Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.

Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)

Afroasian

@Nick: definitely a conspiracy :) – Pokelogan

@Mauvis Ledford I've just checked sixrevisions.com/web-development/html5-iphone-app and it doesn't work on my iPhone4 iOS 4.3.1. I think Apple broke this, it has worked before. – Pathfinder

@Mauvis Ledford I'd be very interested in further debug, as we're receiving a few reports of the FT app not working offline. Tests here (on iPad 4.2 and 4.3.3 & iPhone 4.3.3) show the app working offline on the homescreens or on the dock; I even tried moving offline and then moving it from a screen to the dock, still works! There's definitely a bit of voodoo involved with manifests somewhere, but I can't pin down this final something... (FWIW, it appears that clearing cache and databases, then restarting the device, appears to kick it into working if there are errors). – Koby

Tested again on a different iPhone4 iOS 4.3.3 today with FT on homescreen and airplane mode turned on. – Pathfinder

@Nick Weaver: See my answer below. It appears that just clearing the Safari cache will fit it - sadly customers won't know this if it happens to them, but thanks for the tip! Feel free to continue to post here if you ever get a gauge on how wide-spread this issue is. Could spell the death of offline html5 apps on iOs if it's a popular problem. – Afroasian

Note that the FT app has added a pop-up with instructions to clear the cache and restart the device in order to use offline. Thank god for this post, I was starting to lose it... – Fiberglass

I ran into the same problem in an iPad. In my case my manifest was missing a file. You can validate your manifest using manifest-validator.com. – Changeable

Answer 1

After reading the comments (especially Rowan's) I ran more tests and found the answer:

No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.

Here's the steps:

1. Close the web app (make sure its not sticking around in the background).
2. Cleared Mobile Safari cache: Settings > Safari > Clear Cache
3. Reopened the app (for caching).
4. Close the web app again (make sure its not sticking around in the background).
5. Enabled "Airplane Mode": Settings > Airplane Mode
6. Reopened the app.

It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.

Afroasian

One little extra caveat on this front: although it probably improves situations for the homescreen, clearing the cache will break manifest use within MobileSafari. After clearing the cache, manifest swaps will fail with unspecified errors in MobileSafari until MobileSafari is restarted. Presumably this doesn't affect homescreen apps because they're restarted every time… (People using betas of future releases may find this particular bug resolved…) – Koby

I just wanted to confirm that following those steps also helped solve the issue on my iPhone. The same web app I developed was working fine in "Airplane Mode" on an iPad, but the iPhone was complaining "web-app-name could not be opened because it is not connected to the internet." After clearing Mobile safari cache with the steps above, the web app is now working on my iPhone. – Orthopteran

Answer 2

add this to your html:

https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?

Kellam

Broken link here. – Tales

Answer 3

iOS seems to be very sensitive to load issues when offline.

I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.

In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:

if (!navigator.standalone) insertFrames();

Nell