HTML5 Dev Conf - Session on "Using Client Side Storage Today"
IndexedDB Example on Cordova (Phonegap) - Android
Get the source and run on Eclipse
The last blog post demonstrated using the IndexedDB API on Cordova (Phonegap) - iOS. Using the IndexedDB API was simple; with just a requirement to add a delay to IndexedDB operations so that the IndexedDB polyfill can be done with its housekeeping database activities.
This post takes the idea furthur and demonstrated the use of IndexedDB with Cordova on Android based devices. The source code is available here and can be opened with Eclipse to see it in action. The screenshots below show it in action.
Getting it to work on Android gets a little trickier. The IndexedDB Shim starts doing housekeeping tasks like creating tables for database versions, etc. as soon as it is loaded. In case of Android, WebSQL operations must be performed till the deviceready is fired. In case such an operation starts, the native implementation seems to kick in and all future operations seem to fail.
To overcome this limitation of the polyfill, the polyfill is injected using javascript within the deviceready event, thus starting the housekeeping only after Cordova is ready. A way to fix this in the polyfill would be to watch out for a flag that lets the housekeeping start, and raise an event when the housekeeping is done, but this approach would make the polyfill harder to use.
Watch out this space for updates on my experiments with IndexedDB. Next activity - getting it to work with Windows Phone 7 ? B2G already supports it natively !!
IndexedDB Example on Cordova (Phonegap) - iOS
Get the source and run on XCode
The IndexedDB API is currently supported by IE10, Firefox and Chrome, while browsers like Opera and Safari support the WebSQL API. With such a divide, writing web sites that utilize offline storage mechanisms and are supported on all the major browsers is hard.
The IndexedDB polyfill project aims to solve this problem by using WebSQL implemented in browsers like Safari and Opera to expose IndexedDB API for web applications. With the polyfill, websites can now use the single IndexedDB API for all offline needs. Opera and Safari make up a good percentage of the mobile browsers, and with the polyfill, mobile sites can leverage offline storage better.
This post tries to explore the mobile web and explains the usage of the IndexedDB polyfill in HTML5 based mobile application frameworks like Cordova (Phonegap). Since Cordova simply exposes a UIWebView and the underlying browser is a flavor Webkit. This post explains how the IndexedDB polyfill is leveraged to write offline Phonegap applications with the IndexedDB API.
The screenshot below shows the sample IndexedDB Application that uses the jquery IndexedDB library. The source code (more importantly, the www folder) is exactly the same as for the web with one difference. You can get the source code and open it in XCode to see it in action.
The only difference between this and the desktop version is the time when the application starts. Since the IndexedDB polyfill has to create table (dbversions) for housekeeping and that takes some time, the code to bootstrap the schema needs to be delayed a little.
The screenshots below show the Safari Developer connected to the iPhone 6 simulator, with the sqlite databases and their contents, as saved by the polyfill.
In addition to the sample application, I also added the IndexedDB polyfill test suite, that can be accessed via the link at the top. All the tests seem to run indicating that most parts of the API covered in the test suites seem to work on Cordova too.
With the IndexedDB API now usable in Cordova iOS, I am looking at developing a sample application that shows a similar application for Cordova Android, Watch out this space for updates.
Subscribe to:
Posts (Atom)