Problems with using appcache and Ionic

HI,

I created a small Ionic based app that has been set up as a web app (e.g. with just the ionic css and Angular, no phonegap)

We’ve recently added appcache to make the app still work offline, but now I’m getting issues with my service not loading correctly, when the appcache is updated with a new version.

The error message I get is:

DataAccessService.load is not a function

This is the service which fails:

angular.module('MemberInduction').factory('DataAccessService', function ($http, ConfigService) {


var dataAccessService = {};


function writeToLocalStorage(data) {
    localStorage.setItem('MI.ApplicationData', JSON.stringify(data));
    reloadView();
}


function reloadView() {
    window.location.href = '#/tab/home'
}


dataAccessService.load = function () {
    var tempData = {};
    var currentEnvironment = ConfigService.getEnvironment().environment;
    var loadApplicationDataUrl = '';
    if (currentEnvironment == 'dev') {
        loadApplicationDataUrl = ConfigService.getEnvironment().urls.dev.baseUrl + ConfigService.getEnvironment().urls.dev.loadDataUrl;
    } else {
        loadApplicationDataUrl = ConfigService.getEnvironment().urls.live.baseUrl + ConfigService.getEnvironment().urls.live.loadDataUrl;
    }
    $http.get(loadApplicationDataUrl).success(function (data, status, headers, config) {
        tempData = data;
        writeToLocalStorage(data);
        
    }).error(function (error) {
        console.log('error handler of dataAccessService Load', error);
    });
    return tempData; 
}





dataAccessService.resetLocalStorage = function () {
    localStorage.setItem('MI.ApplicationData', null);
    localStorage.setItem('MI.ApplicationFirstRun', false);
    this.load();
};


dataAccessService.getInductionList = function () {
    var dataFromlocalstorage = localStorage.getItem('MI.ApplicationData');
    var appData = JSON.parse(dataFromlocalstorage);
    return appData.Inductions;
};


dataAccessService.getInductionDetailsById = function (id) {
    var inductionsObj = this.getInductionList();
    var induction = null;
    for (var inductionItem in inductionsObj) {
        
        if (inductionsObj.hasOwnProperty(inductionItem)) {
            if (inductionsObj[inductionItem].InductionId == id) {
                induction = inductionsObj[inductionItem];
            }
        }
    }
    return induction;
};


dataAccessService.getGroupList = function () {
    var dataFromlocalstorage = localStorage.getItem('MI.ApplicationData');
    var groups = JSON.parse(dataFromlocalstorage).Groups;
    return groups;
};


dataAccessService.getGroupDetailsById = function (id) {
    var listOfGroups = this.getGroupList();
    var selectedGroup = null;
    for (var currentGroup in listOfGroups) {
        
        if (listOfGroups.hasOwnProperty(currentGroup)) {
            if (listOfGroups[currentGroup].GroupId == id) {
                selectedGroup = listOfGroups[currentGroup];
            }
        }
    }
    
    return selectedGroup;
};


dataAccessService.getGeneralInformation = function () {
    var data = JSON.parse(localStorage.getItem('MI.ApplicationData'));
    var generalInformation = data.GeneralInformation;
    return generalInformation;
};


return dataAccessService;
});

It looks like the problem is when the app has a new version or first runs, the appcache is stopping the load function of DataAccessService running, which might be due to the $http service call I make within the load() function. When I reload the app the data has loaded correctly.

Anyone used appcache with an Ionic/Angular app or know how I can get round this problem?

Thanks

Stephen