ionic framework sync data and work offline

All we need is an easy explanation of the problem, so here it is.

I’m developing an app using ionic framework, and it will fetch some data from an API which was built using laravel, save it in a database so when the user is offline he can continue use the app, I did a little research on the internet and found a plugin called pouchDB, is it recommended for what I need? what is the best way to do it?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Depending on the amount of data you wish to cache, you can save it in local storage.

The logic would be like this:

  1. Make an $http request to your API
  2. In the .success stringify the response and store in local storage
  3. In the .error parse the stored local storage response
  4. Populate the same $scope variable from both the .success and .error

This way if your requests succeed (the device has internet and the API is functional) the data is stored. Otherwise, the requests fail (no internet or other reason), use the stored data.

An example of this can be seen here:

However, like mentioned in a previous answer, PouchDB is a great option if you have a CouchDB database setup. Here are a few Ionic tutorials for syncing solutions:


Method 2

PouchDb is sure a good solution to provide data synchronization to your app.
But depending from what you need to do you could choose between several PaaS that provide natively data synchronization and offline capabilities(along with many other features like oAuth2 authentication and push notification).

I have worked with a few i can suggest:

  1. Parse
  2. Firebase
  3. Microsoft Azure mobile services

All these platforms provide clients to work with for all native mobile environments and javascript.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply