Storing data in cache in an Ionic App

Question

I am using an external Wordpress Rest API as content for my Ionic app.

This provides up to 500 pages feeding from my Wordpress site. If a user doesn't have internet access when accessing my app. Is there a way I can populate all the content in the Apps cache before I do my App build so there will be some content to view for every page.

Then perhaps later when they get internet access back that page can be updated?

Answer 1

If your goal is to store client-side and persistent data, you can't use the $cacheFactory, which just caches the data for the current session.

You can save data in localStorage.

Make something like this:

Factory

.factory('Content', ['$http', Content])

function Content($http) {

     function getcontent(callback, url) {
        var articles = [];
        var article = {};
        $http.get(url).success(function(response) {
            if (response.content[0].length > 0) {
                for (var i = 0; i < response.content[0].length; i++) {
                    article = {
                        title:response.content[0][i].title,  
                        subtitle:response.content[0][i].subtitle
                    }
                    articles.push(article); 
                }
            } else {
                //      
            }
        }).error(function() {
            //        
        }).then(function() {
            callback(articles);
        });;
    }
    return {
        getcontent: getcontent
    }
} 

Controller

.controller('ContentCtrl', ['$scope', '$http', '$timeout', 'Content', '$localStorage',
    function($scope, $http, $timeout, Content, $localStorage) {

        $scope.showContent = function() {

                var url = WordPressUrl;
                $timeout(function() {
                    Content.getcontent(function(data) {
                        $scope.getcontent = data;
                        var contentList = [];
                        data.forEach(function(localy) {
                            var oneArticle = {
                                title: localy.title,
                                subtitle: localy.subtitle
                            }
                            contentList.push(oneArticle);
                        });
                        window.localStorage.setItem("ContentLocaly", JSON.stringify(contentList));
                        // $localStorage.message = localStorage["ContentLocaly"];
                    }, url);
                }, 1000);
        }

          //  $scope.showContent();

    }
])

Then you can use it in other controllers.

        $scope.LocalyFeed = function() {
            $scope.Wordpress = JSON.parse(localStorage["ContentLocaly"]);
            console.log($scope.Wordpress);
        //  return $scope.Wordpress;
        };

For checking internet connection you can make something like this.

Factory

.factory('checkInternet', function() {
    return function checkInternet() {
        var haveInternet= true;
        if (window.cordova) {
            if (window.Connection) {
                if (navigator.connection.type == Connection.NONE) {
                    haveInternet= false;
                }
            }
        }
        return haveInternet;
    };
})

Controller

.controller('ExampleCtrl', ['$scope', '$http','checkInternet',
    function($scope, $http, checkInternet) {

        $scope.showSomething = function() {
        var haveInternet= checkInternet();
       if (haveInternet== true) {
        // do something
       } else {
        // do something else   
        }

        }
 }
])