Search code examples
jqueryhtmlhtml5-appcache

HTML5 appcache causing jquery getJSON to return error

I'm having an issue when trying to use getJSON on a link while the current page is cached through appcache. The browser is online which I have checked with navigator.onLine and I'm pretty certain my internet is connected. I've tried with both AppCache and without and it seems that there is only an error when I'm using AppCache which leads me to believe I'm doing something wrong or you're unable to send json requests when the page is loaded with appcache?

Here is the result of the json request (See code below) with and without appcache turned on:

With AppCache (Failed): enter image description here

Without AppCache (Yay it works): enter image description here

NOTE: The request is cross-domain, although I do have Access-Control-Allow-Origin set on the destination.

My Code

Service.appcache

CACHE MANIFEST
plugins/bootstrap-switch.min.css
plugins/bootstrap-timepicker.min.css
plugins/bootstrap-datepicker.css
plugins/jquery.min.js
plugins/bootstrap-switch.min.js
plugins/bootstrap-datepicker.min.js
plugins/bootstrap-timepicker.min.js
plugins/Dexie.min.js
plugins/jSignature.min.js
plugins/bootstrap.min.css
plugins/select2.min.css
plugins/select2.full.min.js
fonts/glyphicons-halflings-regular.woff
fonts/glyphicons-halflings-regular.ttf
fonts/glyphicons-halflings-regular.woff2


SETTINGS:
prefer-online

index.php

<html manifest="/service.appcache"> 
....
$( document ).on( 'click', '#getdbdata', function () 
{
    if(navigator.onLine == true) 
    {
        $.getJSON( "http://example.com/getdata?apikey="+apikey, function( data ) 
        {
            console.log(data);
            alert( "Database has been updated!" );
        })
        .fail(function() {
            alert( "Could not update the database at this time!" );
        })

    }
});
....
</html>

I don't know too much about appcache, so I was wondering why the request is not going through. Any help would be nice, thanks!

Solution

  • You need to add NETWORK: * section to your CACHE MANIFEST.