Working with OfflineJS and AngularJS

Question

I am working on an angular app where I want to integrate OfflineJS functionality. I have created a general service for getting and posting data to/from an API,and a specific service for each module. Here is the code

    app.service('MethodProvider', function ($http) {
    var self = this;
    self.get = function (url) {
        var obj = {
            url: url,
            method: 'GET',
            async: true,
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return $http(obj);
    };
    self.post = function (url, data) {
        var obj = {
            url: url,
            method: 'POST',
            async: true,
            data: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return $http(obj);
    };
    self.put = function (url, data) {
        var obj = {
            url: url,
            method: 'PUT',
            async: true,
            headers: {
                'Content-Type': 'application/json'
            }
        };

        if (typeof data != 'undefined' && data != null) {
            obj.data = JSON.stringify(data);
        }
        return $http(obj);
    };
    self.delete = function (url) {
        var obj = {
            url: url,
            method: 'POST',
            async: true,
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return $http(obj);
    };
    return self;
});

And a specific module service like User module

 app.service('UserSrvc', function (MethodProvider) {
    var self = this;
    self.create = function (data) {
        var url = apiUrl + '/user/add';
        return MethodProvider.post(url, data);
    };
    return self;
});

How do I integrate OfflineJS in this code , I want to intercept HTTP request when network connectivity is down and resume requests when network connectivity is up . I have studied this example but unable to integrate this in angular need an example to get started.

Possible duplicate of [How can check offline and online in angular](http://stackoverflow.com/questions/30543426/how-can-check-offline-and-online-in-angular) — Adnan Umer, Aug 29 '16 at 08:51
`Offline.js` will automatically captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly. So, you don't need to do any manual work. Further there is an angular component for that too. https://github.com/neoziro/angular-offline — Adnan Umer, Aug 29 '16 at 08:59
I try to disable internet and soon pressed getData button , It shows reconnecting messages and make ajax requests, but when I enable the internet it shows message Internet is up but doesnot get ajax request again. — Ghazanfar Khan, Aug 29 '16 at 09:03
You need to set `{ interceptRequests: true, requests: true }` as `Offline.options` — Adnan Umer, Aug 29 '16 at 09:10
I am confused about checks options in offline ? Should I have to provide every request URL to it? — Ghazanfar Khan, Aug 29 '16 at 09:39

Ric K · Answer 1 · 2016-10-10T10:31:54.733

hope this helps the future users: Offlinejs adds Offline object to the global window object.

Offlinejs does not trigger check() by itself (it does it once if checkOnLoad option is set to true).
You may call Offline.check() just before you make an ajax request to your server and check for connection.
You can also do polling, if your app is xhr intensive.

var run = function(){ 
    if(Offline.state=="up")
            Offline.check();
    };
setInterval(run, 20000); // check after 20sec
Offline.on('down',function(){ /**code to handle network down*/ });

As pointed by @Adnan Umer You need to set Offline.options = { interceptRequests: true, requests: true } to intercept failed requests and try again once connection is back. One caveat here is that the requests resent by Offline will be out of the scope of Angular, accordingly, all the GET requests will result to nothing. Which is actually fine, usually the user initiates the get requests.

Offline.options = {
    checks: {xhr: {url: "put_url_to_check_status_of_your_server"}}
}

By default, Offlinejs checks for favicon.ico.

Working with OfflineJS and AngularJS

1 Answers1