Problems with HTML5 Web SQL Database

Question

Currently, my company is moving to a new architecture, as well as a model that provides services for mobile devices. Our application was traditionally based on web interfaces ( HTML5 / CSS3 / JS / PHP / MYSQL ), so we want to be able to port it to mobile platforms without the need to reinvent the wheel ( Cordoba strong>), as well as for offline desktop computers ( AppJS ), so we don’t need to worry about browser- specific errors. We are also moving from PHP to NodeJS to make this more doable.

The problem is that our users MUST use an offline application without any real restrictions on how long or how much data they can store until they "synchronize" with our servers.

With AppJS, this is not a problem because they can store as much data as possible in the sqlite database. However, I found a problem regarding the 5 MB quota for WebSQL and cordova / phonegap data. This presents the obvious technical problems associated with our business needs.

I know that there are several plugins that allow you to use sqlite data. The source sqlite plugin (https://github.com/davibe/Phonegap-SQLitePlugin) is missing documentation for android, and the other (https://github.com/chbrody/Cordova-SQLitePlugin) requires me to specify a data limit, which obviously impossible. Therefore, I have very few options left, one of which is to divide the databases into several 5 MB segments, which are controlled by the JS shell.

Can you split large datasets into multiple 5MB websql databases without problems on iOS and Android?

Is there a limit on the total number of websql databases on iOS and Android?

Are there any other options that you would recommend to us? We need to be able to use existing HTML5 and CSS for the interface!

EDIT

Our original architecture never worked with tablet devices. This is what we want to fix with Cordova, and also to create a more stable solution. Initially, our stand-alone product ran on the Server2Go stack, which had all kinds of platform problems due to various applications running on the client machine.

Answer 1

For the Android platform, you can create your own application, and then use the web view to display the interface (if it is really so important to save it in HTML), and then use the javascript bridge to allow the contents in the WebView to interact with your native application.

From what you described about the application, I think you better create your own application. As you say in your comment, one of the reasons you switch your platform is due to lack of control. Why then immediately reopen this can of worms, introducing all kinds of hybrid application frameworks onto its stack.

In short, you will have full control (and most likely the best product) if you just go with a native approach.

Answer 2

Generally speaking, I recommend using the lawn so that you can be agnostic. http://brian.io/lawnchair/adapters/

Is it possible to split large data arrays into several 5MB websql databases without problems in iOS and Android?

Before I found out about the lawn, I implemented it using WebSQL , which I regret. WebSQL databases can grow up to 5 MB. I'm not sure what true max is, but I installed the Phonegap application on 100 * 1024 * 1024 and did not have any problems on Honeycomb Android.

For iOS, you can use the SQLite database on PhoneGap / iOS - possibly more than 5 MB .

Answer 3

To get a truly cross-platform, cross-browser relational solution that will work offline and have the required amount of memory, I would suggest: SequelSphere

Since this is a 100% JavaScript solution, it should be used in each of your configurations, without requiring any other code base. In addition, it uses IndexedDB (if available, then LocalStorage) to store its data in relational tables. I believe that most browsers do not have a limit on the size of the IndexedDB storage. I think Firefox may have an initial limit of 50 MB for the following: Maximum size in IndexedDB .

In addition, there is a new feature called “Change Tracking”, which greatly helps in the process of data synchronization, tracking changes (inserts / updates / deletes) in tables, and then reports them when you want.

As an added bonus, unlike WebSQL, SequelSphere is very VERY JSON. Creating tables couldn't be simpler:

db.catalog.createTable({ tableName: "EMPL", columns: [ "EMPL_ID", "NAME", "AGE", "DEPT_ID" ], primaryKey: [ "EMPL_ID" ], data: [ [0,"Bob",32,0], [1,"John",37,2], [2,"Fred",28,1] ] }); 

The data request is simple:

 var res = db.query("SELECT name, age, dept_id FROM empl WHERE Dept_ID = 2"); 

Inserting / updating / deleting data is very simple:

 db.insertRow("empl", [3, "Sue", 26, 2]); db.updateRow("empl", [3, "Suzy", 26, 2]); db.deleteRow("empl", [3, "Suzy", 26, 2]); 

One thing to be aware of: since this will be used in a standalone application, make sure that you set the "Storage Area" of the entire Directory or each table as "SCOPE_LOCAL":

 db.catalog.setPersistenceScope(db.SCOPE_LOCAL); // -or- db.catalog.getTable("empl").setPersistenceScope(db.SCOPE_LOCAL); 

• Basics Documentation: SequelSphere Basics
• Local Storage Support Documentation: Local Storage and Retention
• Here is the API: SequelSphere API

If you have questions, just email SequelSphere support.

For complete transparency, I am part of SequelSphere and it seems to answer your question very well ...;)