Check out a free preview of the full Progressive Web Applications and Offline course:
The "Introducing IndexedDB" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Mike introduces indexedDB (Indexed Database API), which is a low-level API for client-side storage of structured data, including files and blobs.

Get Unlimited Access Now

Transcript from the "Introducing IndexedDB" Lesson

[00:00:00]
>> Mike North: Let's talk about enriching this a little bit further. So right now we can view the app right? We can view the app offline. And this if we were building like the New York Times or something like this where largely you're just consuming content and it's like get requests like I only care about get request mostly as a user.

[00:00:22] You could build be a pretty good product without me having to manipulate things. But here we have like a cart and not everything is on the screen here. So we might have a need to sort of store data in a different way so that we can maybe queue things up so that we can flush them later on like save them to the API in the event that we go online.

[00:00:49] And a foundational pillar of that is IndexedDB. IndexDB is a no SQL database that lives in your browser. So there are a couple of things we look for in a great database like this, when we say no SQL by the way, it's not relational. It's sort of document-based, so we can store objects, and those objects can have IDs, but we kind of have some flexibility around the structure of these things.

[00:01:22] Which is great, because we've got these cart items, and we might just wanna put them somewhere and retrieve them or query by attributes. But I don't really wanna define a complex schema here. So here is some characteristics of IndexedDB that make this really well suited for solving some modern web problems.

[00:01:42] It's versioned and if you've ever written a desktop app this is really important, right? So like it is not an accident that you can in a recent version of Ms Word, Open a Word97 document. The concept of what that document is has evolved a lot over 20 years.

[00:02:04] But because of versioning, the idea is you can identify that, here's a piece of data, it might be quite old. Let's sort of identify what Version it is, and then we know what to expect from it, and maybe we can upgrade it to the modern Word document and then save it, right?

[00:02:24] So the same concept exists here, because potentially, a user could visit your app, you store something in an IndexedDb, and they don't come back for a year and a half later. And so you've got this thing hanging around in durable data. And you want to be able to have a forward path to evolving what you store in IndexedDB while still making it so this doesn't cause problems for users.

[00:02:53] Records are indexible. Which means if you have particular queries that are common. In our case, you might notice that grocery items have a category and you can drill into those categories and say show me all the fruits and the vegetables. So you might find that hey, we're often asking for a collection of fruits by category.

[00:03:12] You would have an index there which basically says like as we add items to this data base, hash them by categories so that it's very easy to kind of grab the collection of them, you know, of that category and return them rather than sort of exhaustively searching and doing that analysis on the fly.

[00:03:34] IndexedDB is worker friendly, largely because it has an async API. It is not like local storage, it is not like a cookie. It is durable just like local storage and cookies and it plays by the same rules as many of the web storage mechanisms we're used to. Meaning, you get one for your domain, just like a cookie.

[00:03:58] Like you can't alter a Facebook cookie unless you running code on a Facebook.com domain. IndexedDB supports values of many types, including things that are really annoying to store in local storage like, in our case, like what if a user was scanning QR codes and we wanted to sort of store those images, cuz maybe they hit five or six images and we've got our workers all qued up, but we want to hold on to them somewhere, in case they close the app before we're done.

[00:04:30] You could store those as blobs here, rather than what you'd have to do in local storage, like base 64 and code that thing, at which point you would certainly be well over the maximum allowable size in local storage. And just be aware, this is not MySQL, this is not SQLite, this is not Postgres.

[00:04:49] We're not dealing really with tables here, we're dealing with stores. And you basically kind of define a document or object type in that case, grocery item, like that's what we're going to be using today. And you'll have a store for grocery items, that's as close as you get to a table.

[00:05:10] We're going to look at IndexDB's raw API and then I'm going show you a modernized library that is all ready installed in your projects, but I would recommend using instead. And it's just a thin wrapper around it.