Are offline HTML5 apps possible in iOS 4.3.4?

490 Views Asked by At

I'm trying my hand at building an HTML5 driven offline app for my iPad 2 which has iOS 4.3.4. I followed instructions I've seen on several websites to a tee, and was even able to verify using Chrome's Developer Tools that the cache is working:

Creating Application Cache with manifest http://localhost/experiments/test.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://localhost/experiments/offlineApp.js
Application Cache Progress event (1 of 2) http://localhost/experiments/offlineApp.css
Application Cache Progress event (2 of 2)
Application Cache Cached event

I have a home screen icon as well as a "startup screen" image in play. I can download the app to the home screen just fine, and I see the icon there. However, when I have the Wi-Fi off and I try to open the app I get the dreaded " could not be opened because it is not connected to the Internet" alert.

Does anyone know if something changed in iOS 4.3.4 (or an earlier version of the OS) that changed the requirements to get this feature of HTML5 working?

Thanks!

Edit

I tried this again outside of a "localhost" setting. This is my HTML:

<!DOCTYPE html>
<html lang="en" manifest="/experiments/cache.manifest">
    <head>
        <meta charset="utf-8"/>
        <title>cache.manifest test</title>
        <link rel="stylesheet" href="cache-manifest-test.css"/>
        <link rel="apple-touch-icon" href="icon.png"/>
    </head>
    <body>
        <h1>cache.manifest</h1>
        <p>Let's see if this thing works...</p>
        <script src="cache-manifest-test.js"></script>
    </body>
</html>

And this is my cache.manifest file's contents:

CACHE MANIFEST
cache-manifest-test.css
cache-manifest-test.js

I see the proper results in Chrome's developer tools. I get the "Application Cache Cached event." It just doesn't work offline. I'm really stumped here...

Does anyone know of any pages that have full blown code I could just copy to my server and try?

Thanks...

1

There are 1 best solutions below

1
On

The messages you posted from Chrome are when the page is served from localhost.

Check that it works on Chrome using the server rather than localhost.

If it doesn't, check that you are serving the correct type (text/cache-manifest) for an appcache on the server.

If you're serving the correct type on localhost but not on the server, that would explain the different behavior.

Also, I've read that the file must be named "cache.manifest" on the iPad. If you have named it something else, try that.