Alex Rivera | Logout

Cannot access manifest-cached files with AJAX from webapp saved to Home screen in iOS devices, using jQuery.ajax()

Asked 2011-04-28T20:28:17.440
11

I'm making a webapp. Some of the files that it loads contain pure, static .JSON data. I am using jQuery.ajax() (jQuery 1.5.2) with dataType:'json' and cache:true. Everything works well and all files are loaded. I have also configured the cache manifest to cache these JSON files (in addition to css , js, and images). Everything works well there too - when a user visits my site all the files that I need are cached correctly (I have applicationCache event handlers that confirm all is well). I have tested everything in Google Chrome and I can see that all files (including the JSON ones) are cached. When I disconnect from the network, everything works (the jQuery ajax calls automagically fetch the cached JSON files).

Now I am trying to test this on mobile Safari (on actual iPad and the iPhone simulator). Everything works as expected when in Safari - the pages are cached and on subsequent visits with network disconnected, the cached files are used.

However, when I add the app to the Home Screen using "add to home screen" in Safari, the app starts up and all the .js, .css, and images work correctly, BUT my Ajax calls don't! They don't access the cached .json files. For each Ajax call the XMLHttpRequest.status is 0, .statusText is error, but getAllResponseHeaders() shows the same (correct) headers as in the functional app in Safari.

I don't get this. Is this a limitation/bug in jQuery's .ajax() or what? Any help is appreciated.

javascript caching jquery manifest
Edit
Report

1 Answer

0

Another way to go about this (especially if you're a jQuery fan) could be to use the jQ Ajax method and force no cache:

cache:false,

Obviously, ajax will fail to load server side data while offline so why not check if user's online and if so, go ahead and fetch data:

 if(navigator.onLine) { //if user's online

    var data = 'data=' + randomVar;

    $.ajax({
        url: "url.php",  
        type: "POST",
        timeout:45000, //45 secs        
        data: data,
        cache: false,
        error: function () { alert("error: 45 secs have passed since request was sent. No data was returned - too slow internet connection or some other random error."); },
        success: function (responseText) {
            // do whatever if successful
        }
    });


} // if online
answered 2012-06-27T14:45:37.150

Your Answer