Offline-first app development (local storage + server sync)

I’m delving into my first Ionic Vue cross-platform offline-first app and would love to hear any advice for tools to go about it, particularly for local data storage and two-way sync to server. Here’s a simple summary of technical needs for the app:

  • Offline, local storage by default
  • Optional account signup enables two-way sync with server
  • CRUD operations on text data (no images or other file types for now)
  • Cross-platform Android, iOS, and web

The two-way sync needs to be robust enough to handle frequent usage back and forth between mobile and web apps, and I’d like to use a library that handles as much of the sync logic as possible. If it has integrations for Ionic and/or Vue even better.

From what I’ve researched these seem to be the existing options for local storage with sync to server:

PouchDB looks ideal, I’m just surprised by the small number of GitHub repos using it with Vue. I’m also open to SQL-based options.

Also I get the impression that to really persist local storage, I’ll need to also use the Ionic storage module as well. Is this accurate?

Much thanks for any recommendations or advice.

2 Likes

Hi

I am working on an offline first app in PWA, using my home-brew sync mechanism (not fully two way) using Ionic Storage and Firebase. I am not sure if this was the best choice. SQL could have been easier/better? Knowing that read speeds from server arent that critical anymore (for UI response times) in an offline first app. Syncing tables is maybe an easier task.

PWA and localstorage on iOS - not sure if that is a happy marriage too - if there is lots of data.

So besides your backend choices, it is interesting to know how you want to deploy the app.

In a capacitor/cordova solution, it is easy to implement sqlite.

I assume, there is a lot written/available about sync strategies in sql only situation. But not aware of libraries nor experience.

1 Like

Hi,

Offline first app development is an amazing concept which will reduce the probability of users uninstalling apps. Yes, due to lousy internet speed or poor connection, tons of mobile apps have been discarded by the users from their smart phones across the globe yearly. Apparently these circumstances will affect any business if that app seems a primary source for that business. With offline apps, this can be fixed.

@tetsuwanadam - what did you end up using? Would love to learn about your exprience.

I went with PouchDB and pouchdb-adapter-cordova-sqlite. I’ve been using it essentially just to manage and persist data to local storage on iOS and Android. It’s been over a year and it’s worked fine for myself and a small number of beta testers.

That said I’ve done little actual syncing aside from to my own personal test account. Last I checked Cloudant and a couple other CouchDB hosts (or self-hosted CouchDB) are the only options, and I’m not sure how involved it’s gonna be setting it up for multiple users each with their own database.

I haven’t looked at the alternatives lately but I see @aaronksaunders has a tutorial on using Realm with Ionic Vue. Aaron, any thoughts? And have you used PouchDB much to compare it to?

1 Like

realm can only do offline with a native plugin and there isn’t a native plugin for ionic

I evaluated all the possibilities and think the best free solution is to use PouchDB as a frontend storage and CouchDB as a database for seamless scaling. Of course CouchDB has its drawback as it can’t keep up with e.g. MongoDBs performance for a huge number of documents, but that is not what it was built for.

We just want to have a easy sync with eventual consistency and high availability.
In case someone needs an example solution i recently created an Udemy Course on Offline First Apps with Angular and Ionic, building a waiter ordering app using PouchDB and CouchDB sync with the possibility to just lose the internet connection and keep on ordering.

The code is freely accessible on Github: GitHub - deroux/offline-first-apps-angular-ionic-couchdb: Offline-first Apps with Angular, Ionic and CouchDB Synchronisation

Of course it is work in progress as always…

Hope this helps someone!

1 Like

Thanks for sharing this. Have you used PouchDB + CouchDB for any consumer applications yet and did you use a CouchDB service like CouchBase or host your own? I’m concerned how complicated the user signup to CouchDB client account setup flow might be.

There’s a new kid in town, https://rxdb.info/, that supports offline 1st approach and it’s free with paid plugins. Better than CouchDB. And a lot simpler than the previously mentioned options.

No problem. Yes I have used it for consumer applications, you only have to be sure of the drawbacks of CouchDB. For me that was building another service which cleans up the CouchDB on a regular basis if it gets too big to keep it on the most performant level to avoid any kind of delay for the user.
User signup is no problem at all, CouchDB supports everything you need: https://docs.couchdb.org/en/stable/api/server/authn.html

At the time I used IBM Cloudant: What is CouchDB? | IBM

If I’m not mistaken, making sure that local storage persists in RxDB would require the paid SQLite plugin.