CODEWITHSUNDEEP
javascriptangularjsrestcordovaoffline
David Dahan
David Dahan

Reputation: 11152

How to make an offline AngularJS/Cordova app?

I have a AngularJS app (embedded in a Cordova app). To get and set data, it uses a REST API (that runs on a Django backend server).

I need that the app keeps working for several features even if the network is down. For example, I'm expecting this kind of behaviour:

Online Mode

Fallback offline mode

How would you technically design this? It seems there is lots of differents technologies for offline mode, and it's a little bit confusing to me. Any guidance would be welcome.

Thanks a lot.

Upvotes: 2

Views: 1519

Answers (2)

lukevp
lukevp

Reputation: 715

I'm not sure what the pressure in the comments are not to do this. We have this functionality in an app we are developing.

Basically we package up the iOS app as a Cordova wrapped web container and also run a local proxy server as part of the app. It passes all data through it to the web service. If the requests fail, it returns an identifier to the app so you can determine that the connection to the server is down, and the app then saves the requests to localStorage. That way the UI can adapt to being in "offline mode." you can later push data from the app through the proxy once the connection to the server is restored. The app connects directly to the proxy rather than to a webservice.

As far as I'm aware, there's not an easy library to solve this situation though, and you have to be aware of how the requests will affect the online application (can things go out of sync in your system, if the user runs requests that are cached until later?)

It is definitely something that can be done, though.

Upvotes: 1

Ladislav M
Ladislav M

Reputation: 2187

I would like to use such app, that would make me feel stupid. But there is

You can check network status with this plugin.

https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md

Each request will need a switch between sending HTTP POST and saving POST data to local storage.

Then you would just create callbacks for following events:

document.addEventListener("offline", onOffline, false);
function onOffline() {
    // Turn on saving to local storage
}

document.addEventListener("online", onOnline, false);
function onOnline() {
    // Read local storage, send all requests
}

Upvotes: 1

Related Questions