Best data persistence for Angularjs/Javascript Apps on PhoneGap?

Question

I am looking to find best practices for Angularjs data persistence on a PhoneGap app. I'm using Ionic Framework on top of this, but not relevant to this question as it is just built on top of Angular & Cordova.

I like that Angular remains flexible on data persistence solutions, it makes sense since it is a web framework not specifically a Hybrid app framework... would love to know how people are solving this.

Here's an overview:

Requirements

• Add local database to app build for preloaded data. This will be over the 5MB data limit.
• Load data from local database on startup.
• Saving updated data to local data store for persistence.
• Prefer schema-less if possible.
• Simple query interface. I could load all the data into memory and just use standard Angular filters for this, provided the performance was decent.
• Object query interface... something like an ActiveRecord-like ORM rather than having to write SQL in my app.
• Future proof. I don't want to reinvent the wheel every time I am building an app that needs data persistence. Also would like to choose something that is more standard if possible so I can continue to use it in the future... something like Indexeddb would make sense here.

Options

I've been looking at the following options. Can you provide any feedback on any of these?

• Breezejs - Looks more focused on server. Is there an SQLite interface?
• YDN-DB - Seems like an option, but also seems a little obscure compared to some of the other options.
• JayData - Is this still active? Concerned about commercial aspect of it.
• Persistencejs - This looks promising. Is the project still active?
• ngStorage - is this just a localStorage interface? Does it solve the 5M limit?
• Angular-cache - Can I have data to pre-load with this? How long can I persist data?
• localForage - don't know much about this. Does it solve the 5M limit?
• Pouchdb - concerned about query language. does not solve 5M restriction
• Couchdb Lite - concerned about query language.
• WebSQL - I don't to use this since it seems like it is on the way out.. plus 5M limit.
• Indexeddb - There is a shim that builds compat-layer for most major browsers. 5M limit. If I could use this on top of Sqlite that would prob be a winner for me since more standards based.
• Store in json file - Just use plain old objects and then use Phonegap file api to load and store serialized data. Seems like a pain to have to serialize all the data every time we want to save... but an option so long as I can use Angular filters.

Sorry for the long post. I really would like to see some thoughts on best practices. Would love an Angular Way to handle large data persistence on Hybrid mobile apps.

Thanks

Solution 1

PouchDB dev here. Obviously I'm biased, but here's my take:

1. The best way to get around the storage quotas in PhoneGap/Cordova is to use the SQLite plugin for iOS/Android. The performance also tends to be better, especially on Android. (Edit: in modern post-Kitkat Android, it's actually worse.)

2. WebSQL has a nice query language, but you want to be future-proof, i.e., not chain yourself to a dead standard. There's also Windows Phone and Firefox OS to consider.

3. So if you use PouchDB and install the PhoneGap plugin, it'll work cross-browser and you'll avoid the storage limit on iOS/Android. Win?

Also, it's my personal experience that Angular fits with PouchDB like PB&J, since Angular deals with straight-up JSON objects and so does Pouch. (Compare this to Ember and Backbone, which have custom classes that you have to export to/import from JSON – it's a little trickier.)

Good luck with whatever you choose!

Solution 2

You can use localForage and my implementation in angular: https://github.com/ocombe/angular-localForage On mobile it will use either indexedDB or webSQL and the initial limit will be 50mb. The syntax will be really easy to use in your angular project.

Solution 3

Indexeddb - There is a shim that builds compat-layer for most major browsers. 5M limit. If I could use this on top of Sqlite that would prob be a winner for me since more standards based.

Actually, the limit for WebSQL (the layer below the shim which you'll be actually using under the hood) is *50*M. However, there's a permission request that you can use to get more storage. Additionally, this is what I would recommend for exactly the reasons you noted: standards. The rumor is that Safari 7.1 is going to ship with IndexedDB support.

Comments

[Kevin Baker]

Thanks Jeff, have you used indexeddb in a similar build environment? So if I used indexeddb, you are saying it would prompt the user for access to the 50M when the db exceeded the size? We will be shipping with no more than 3MB seed data, but after the first sync to our REST service it will download a lot more.

[Kevin Baker]

Down the road, but I might look into sponsoring a project that will build an interface between indexeddb API's to Sqlite Cordova plugin. This would be standards and handle all my requirements.

[JohnAndrews]

If I understand correctly, pouchDb has no limit on size? I can store 1GB?

[nlawson]

Not quite pouchdb.com/faq.html#data_limits

[thinice]

To bring the answer into this for @JohnAndrews, as per nlawson's link: "In PhoneGap/Cordova, you can have unlimited data on both iOS and Android by using the SQLite Plugin."

[Yasir]

Do be careful with this, as the websql database on iOS is stored in a temporary data location, and can be cleared by the OS at any time. Switch to using the native database + github.com/thgreasi/localForage-cordovaSQLiteDriver and this shoud be safer.

[stackdave]

@nlawson can use in browsers too ?