Can't Get A Web App To Work Offline On Ipod

I've written a basic password manager type web application to run offline on a mobile device (testing on a 4th gen iPod Touch). I've added the app to the Home Screen and it all wor

Solution 1:

The only thing I can think of is that you have not changed the file, and mobile safari has cached an old version of the manifest. add a comment to your manifest. You might also want to try changing the name of the manifest file itself; I have had to do that to get my IPad to cache -- everytime I update my application I change the name of the manifest to include the date.

Note that iOS4.2 has much better manifest support. You might see things improve when it is out.

Edit -- Or, as it turns out, its just a bad file name. ;) (see comments on question).

Solution 2:

[[Replicated my answer from here below because it may apply here to:]]

I found debugging HTML5 offline apps to be a pain. I found the code from this article helped me figure out what was wrong with my app:

http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/

Debugging HTML 5 Offline Application Cache by Jonathan Stark

If you are looking to provide offline access to your web app, the Offline Application Cache available in HTML5 is killer. However, it’s a giant PITA to debug, especially if you’re still trying to get your head around it.

If you are struggling with the cache manifest, add the following JavaScript to your main HTML page and view the output in the console using Firebug in Firefox or Debug > Show Error Console in Safari.

If you have any questions, PLMK in the comments.

HTH, j

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

functionlogEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready',
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    },
    false
);

setInterval(function(){cache.update()}, 10000);

Solution 3:

Also, make sure the cache.manifest has the correct BOM (in my case UTF-8) that matches your in the HTML file. If you just have a non-BOM ASCII file, and the Content Type is set to UTF-8, the caching will fail

HTH someone.

Christine Boersen