CODEWITHSUNDEEP
jqueryhtmlweb-applications
Rebecca Scott
Rebecca Scott

Reputation: 2431

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 works fine while the iPod is online and can reach the server. Once I put the iPod offline, when I open the app the following dialog comes up:

Cannot Open PwdThing

PwdThing could not be opened because it is not connected to the Internet

The single static HTML file for the app (passwordthing.html) points to the manifest file:

<html manifest="cache.manifest">
...

The cache.manifest file includes all the files used by the app (including the jQuery Mobile files):

CACHE MANIFEST
passwordthing.html
passwordthing.js
...

And the cache.manifest file is set up to be served as text/cache-manifest in the .htaccess file:

AddType text/cache-manifest .manifest

All the source files are on Github (this commit is the version at the time of writing) and I have set up a public server to install it from as well.

Why can't I get my app to work offline?

Upvotes: 5

Views: 3693

Answers (3)

Christine Boersen
Christine Boersen

Reputation: 11

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

Upvotes: 0

Bert F
Bert F

Reputation: 87543

[[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);

function logEvent(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);

Upvotes: 1

hvgotcodes
hvgotcodes

Reputation: 120198

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).

Upvotes: 2

Related Questions