Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic framework sync data and work offline

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?

like image 676
Stack two Avatar asked Feb 19 '15 15:02

Stack two


People also ask

Can ionic app work offline?

In such situations, we can customize the Ionic App, and manage the application when there is no internet. To do that we have to first recognize the status of the Network/Internet connection, and then perform online or offline logic.

What is offline data synchronization?

Offline data sync is not all about pushing the records to the server but you also have to pull the new records from the server. Now we've two events push and pull. Offline mode is more complex than online mode. Following are the complexities with offline mode: Master Data Sync.

What is offline synchronization in android?

Offline sync allows end users to interact with a mobile app—viewing, adding, or modifying data—even when there's no network connection. Changes are stored in a local database. Once the device is back online, these changes are synced with the remote backend.

How do I use ionic framework?

The Ionic Tutorial provides basic and advanced concepts of the Ionic framework. Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript.


2 Answers

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:

https://www.thepolyglotdeveloper.com/2014/06/saving-data-with-ionicframework/

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:

https://www.thepolyglotdeveloper.com/2014/12/syncing-data-firebase-using-ionic-framework/ http://devgirl.org/2014/12/30/sync-data-using-pouchdb-in-your-ionic-framework-app/

Regards,

like image 131
Nic Raboy Avatar answered Oct 10 '22 12:10

Nic Raboy


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.

like image 21
Riccardo Avatar answered Oct 10 '22 12:10

Riccardo