The very first thing we should do is check for IndexedDB support. While there are tools out there that provide generic ways to check for browser features, we can make this much simpler since we’re just checking for one particular thing.
document.addEventListener(“DOMContentLoaded”, function(){
if(“indexedDB” in window) {
console.log(“YES!!! I CAN DO IT!!! WOOT!!!”);
} else {
console.log(“I has a sad.”);
}
},false);
The code snippet above (available in test1.html if you download the zip file attached to this article) uses the DOMContentLoaded event to wait for the page to load. (Ok, that’s kind of obvious, but I recognize this may not be familiar to folks who have only used jQuery.) I then simply see if indexedDB exists in the window object and if so, we’re good to go. That’s the simplest example, but typically we would probably want to store this so we know later on if we can use the feature. Here’s a slightly more advanced example (test2.html).
var idbSupported = false;
document.addEventListener(“DOMContentLoaded”, function(){
if(“indexedDB” in window) {
idbSupported = true;
}
},false);
All I’ve done is created a global variable, idbSupported, that can be used as a flag to see if the current browser can use IndexedDB.