Store “big” data in browser

How to develop an offline web application for mobile?

Today, we’re developing an offline web application, targeted at the mobile market.

One of the main application requirements for the app is to work offline – it should work even when there is no network.

We had two main requirements:

1. The app using  a lot of data, more than 5 MB –  we couldn’t use local storage because its size limitation.

2. The app should work when there is no network.

In this post, I will list the solution that we found to the first requirement.

How to store data in the browser?

Html 5 has a new feature called indexedDB – It replaced the older (W3C deprecated) Web SQL database. The IndexedDB web database allows your HTML5 web application to store data associated with a host/protocol/port, locally on the client’s hard-drive. Unlike LocalStorage, which lets you store data using a simple key-value pair only, the IndexedDB is more powerful and useful for applications that requires you to store a large amount of data.

As a side note, at this time we only need a quota of 10MB for storage.

Also, currently we don’t have to use the capabilities of a relational databases such as complex queries, etc. (we may need later).

The first challenge we encountered – Safari browser doesn’t support indexedDB.

safari doesn’t support indexedDB.

So we had to use a polyfill to enable IndexedDB using WebSql, we chose indexedDBShim as the appropriate polyfill.

The use of the indexedDB is not intuitive and therefore we searched for a wrapper that will simplify the work with the indexedDB.

We found the IDBWrapper, a cross-browser wrapper for the HTML5 IndexedDB API. While this API is the future of offline storage, it is not very intuitive to use. IDBWrapper is there to provide easy access to IndexedDB’s features.
The second challenge we encountered – performance

While data loading time in the browser chrome on desktop was reasonable (about 20 sec), data loading time was very long on the iPad (few minutes).

We found (dev-tools->resources) that the chrome arrange the data according index of the array (the stored data was array)

While the safari stores the data in one long string.

The solution that solved the performance problem was to divide the data to bulks

For Summary

In order to develop an offline web application, we used the feature indexedDB

And we added two libraries indexedDBShim to support safari and

IDBWrapper to simplify the usage of indexedDB.