Testing IndexedDB with the SqlCeJsE40.dll COM Server and Microsoft Internet Explorer 8 or 9 Beta
• Updated 1/6/2011: Added a link to Seth Ladd’s 2010-12-13 Google HTML5 Tech Talk (HD) and Narasimhan Parashuram (@nparashuram) added a comment about his TrialTool test pages for IE8 and IE9.
Updated 12/27/2010 by adding an IE8 JScript debugger example (see end of post).
Note: An early, abbreviated version of this post appeared in Windows Azure and Cloud Computing Posts for 12/22/2010+.
Microsoft’s new Interoperability Bridges and Labs Center site offers a link to the Interoperability @ Microsoft team blog’s IndexedDB Prototype Available for Internet Explorer of 12/21/2010:
As we launch our new HTML5 Labs today, this is one of two guest blogs about the first two HTML5 prototypes. It is written by Pablo Castro, a Principal Architect in Microsoft's Business Platform Division.
With the HTML5 wave of features, Web applications will have most of the building blocks required to build full-fledged experiences for users, from video and vector graphics to offline capabilities.
One of the areas that has seen a lot of activity lately is local storage in the browser, captured in the IndexedDB spec, where there is a working draft as well as a more current editor's draft.
The goal of IndexedDB is to introduce a relatively low-level API that allows applications to store data locally and retrieve it efficiently, even if there is a large amount of it.
The API is low-level to keep it really simple and to enable higher-level libraries to be built in JavaScript and follow whatever patterns Web developers think are useful as things change over time.
Folks from various browser vendors have been working together on this for a while now, and Microsoft has been working closely with the teams at Mozilla, Google and other W3C members that are involved in this to design the API together. Yeah, we even had meetings where all of us where in the same room, and no, we didn't spontaneously combust!
The IE folks approach is to focus IE9 on providing developer site-ready HTML5 that can be used today by web developers without having to worry about what is stable and not stable, or being concerned about the site breaking as the specifications and implementations change. Here at the HTML5 Labs we are letting developers experiment with unstable standards before they are ready to be used in production site.
In order to enable that, we have just released an experimental implementation of IndexedDB for IE. Since the spec is still changing regularly, we picked a point in time for the spec (early November) and implemented that.
The goal of this is to enable early access to the API and get feedback from Web developers on it. Since these are early days, remember that there is still time to change and adjust things as needed. And definitely don't deploy any production applications on it :)
You can find out more about this experimental release and download the binaries from this archive, which contains the actual API implementation plus samples to get you started.
For those of you who are curious about the details: we wanted to give folks early access to the API without disrupting their setup, so we built the prototype as a plain COM server that you can register in your box.
That means we don't need to mess with IE configuration or replace files. The only visible effect of this is that you have to start with "new ActiveXObject(...)" instead of the regular windows.indexedDB. That would of course go away if we implement this feature.
If you have feedback, questions or want to reach out to us for any other reason, please contact us here. We're looking forward to hearing from you.
As a side note, and since this is a component of IE, if you want to learn more about how IE is making progress in the space of HTML5 and how we think about new features in this context, check out the IE blog here.
Pablo
This implementation has been tested to work on Internet Explorer 8 & 9.
Here’s a capture of the HTML5 IndexedDB Bug Tracker page (BugTrackerSample.hlm in the installation folder) from Readme.txt’s “Getting Started” section running in IE8:
IndexedDB instances contain key-value object stores, similar in concept to Windows Azure tables. Pablo described IndexedDB in his HTML5 does databases post of 1/4/2010 as:
… [A]n ISAM API with Javascript objects as the record format. You can create indexes to speed up lookups or scans in particular orders. Other than that there is no schema (any clonable Javascript object will do) and no query language.
Unlike Azure tables, the current IndexedDB implementation can have multiple indexes.
It will be interesting to see what higher-level APIs Pablo and his team come up with for RESTful data exchange with Windows Azure tables.
The installation folder also contains a CodeSnippets folder with four asynchronous and corresponding synchronous ECMAScript examples:
- Create IndexedDB Sample: Create_Open Indexed DB (opens the DB if it exists)
- ObjectStore Samples: Create ObjectStores, Delete ObjectStores
- CRUD Samples (requires running sample #2): Put, Add, Get, Delete, Cursor Update and Cursor Get records
- Index Samples (requires running sample #3): Create Index, Index Open Key Cursor, Index Open Cursor, Index Get Methods, Index getKey Methods, Delete Index
Here’s a screen capture of Asynchronous Sample #1 after creating the AsyncIndexedDB database:
To invoke a function, open the page and click the associated button.
SQL Server Compact provides the persistent store, which IE saves as \Users\Username\AppData\Local\Microsoft\DatabaseID\DatabaseName.sdf:
Following is a capture of SQL Server 2008 R2 Management Studio displaying the content of the KIDSTORE ObjectStore created by running all four Asynchronous API Samples:
The autoincrementing __internal__keygen column reflects two previous additions and deletions of six kids with Asynchronous API Samples #3.
Following is a capture of IE8’s built-in JScript debugger in use with the IndexedDB Asynchronous API Samples 3.html page (#3 CRUD Samples.) The breakpoint is in the Async_Delete_Records() function (click image for a 1024-px full-size version.)
The debugger conveniently display properties and methods of IndexedDB’s objects. To learn more, see Deepak Jain’s JScript Debugger in Internet Explorer 8 post of 3/12/2008 and the WebDevTools Team’s JScript Debugging: Made easy with IE8 article of 3/5/2008.
• Update 1/6/2011: Gtugs posted to YouTube on 1/4/2011 a 00:59:37 2010-12-13 Google HTML5 Tech Talk (HD) video presentation about IndexedDB by Seth Ladd:
![image[14]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQEfJv5X7QoTKq27NOcxkr7nS8lO8biCOSvcoN5GnSg-df0L0W1nNLQc9EbT0APVsHtpx3iNrs0U4BhjAf6iCz7JXzd0LMsGUGBhBHgokekqNPIr7zSMw5n1p1OoBF5kUeDZmvFcp/?imgmax=800 "image[14]")
Speaker: Seth Ladd is a Developer Advocate for Google Chrome. He has been developing web applications for over 14 years, and still has a blast doing it. After trying them all, he believes the most productive and fun web framework is Ruby on Rails. He has a wide array of skills and experience, including all aspects of web development, engineering, and deployment. Seth organized and produced Aloha on Rails, the Hawaii Ruby on Rails Conference.
Abstract: HTML5 gives us a number of different techniques for storing information on the client machine: AppCache for storing local copies of assets, localStorage for quick and simple key/value data, WebSQL and IndexDB for full SQL-like queries, and the FileSystem APIs for reading/writing files to a persistent sandbox. We'll spend time discussing all of these solutions and when you would want to use each.
Paul Kinlan posted A Simple TODO list using HTML5 IndexedDB on 12/20/2010. From the Introduction:
IndexedDB is new in HTML5. Web Databases are hosted and persisted inside a user's browser. By allowing developers to create applications with rich query abilities it is envisioned that a new breed of web applications will emerge that have the ability to work online and off-line.
This example code demonstrates how to create a very simple todo list manager. It is a very high level tour of some of the features available in HTML5.
This tutorial is a conversion of our A Simple TODO list using HTML5 WebDatabases tutorial and serves to highlight how easy it is to make the transition to IndexedDB.
Paul is a member of Google’s Developer Relations team.
Related OakLeaf Posts
- Testing IndexedDB with the Trial Tool Web App and Microsoft Internet Explorer 8 or 9 Beta (updated 1/9/2011)
- Testing IndexedDB with the Trial Tool Web App and Mozilla Firefox 4 Beta 8 (updated 1/6/2011)
Atom 1.0 site feed
1 comments:
Here is a showcase of the IndexedDB API for IE - http://blog.nparashuram.com/2011/01/indexeddb-for-internet-explorer.html
Post a Comment