Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 11: 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:

In this challenge, students populate an IndexedDB store with grocery store items in the install handler and then utilize IndedexedDB to provide better contextual fallback images.

Get Unlimited Access Now

Transcript from the "Challenge 11: IndexedDB" Lesson

[00:00:00]
>> Mike North: I'd like us to try to do something a little bit quick and dirty with IndexedDb. Now, we've got some extra ground to cover, and I don't wanna teach you out of some of the later exercises we have today. So I would encourage you to just, to at least do the first half of this and maybe not worry about the second half.

[00:00:22] I will certainly do it in the solution, but there are two steps here.
>> Mike North: So,
>> Mike North: Here's step one. In the activate handler, actually I should correct this, the install handler would be a more appropriate place to put this. I want you to populate an IndexDb object store with all of the grocery items.

[00:00:50] So there are actually way more grocery items available from this API than you're seeing on the screen. And there's a way you can, you can just add this query param to this particular API end point, and you will get lots of them. You will get, currently, I think you're only seeing ten per category.

[00:01:08] This will show you a lot more, and the idea here is that, as part of the installation process, we want to kinda populate IndexedDB with all of those records. And also keep in mind that when you're, oftentimes when you say, I'm just going to go one step back, when we say create object store here, that is how you would typically use this on upgrade needed handler here to ensure that stores exist even if they're not found.

[00:01:46] So this would be a great example to start from, along with the IDB documentation on GitHub. So that's phase one, just to get that IndexedDB populated with stuff. Phase two is gonna sort of unleash the power of having that data there. So there are many, many grocery items available from this API, and currently, we have this fallback image we use in the event that we hit a 404.

[00:02:16] Because IndexedDb is available inside our service worker, we can actually, in the event we find we need a fallback image, we can use that URL to figure out which item ID that image corresponds to. And we can look to IndexedDb to figure out that, that is of the fruit category or of the vegetable category.

[00:02:35] That is why we have all of those other fallback images there. So when I go through the solution, I wanna actually not just populate the database, but I will use that information so that we have category specific fallback images. This is something that you could never do with Ab Cache.

[00:02:54] Right, this service worker is the first thing available in the web technology world that would let you make that kind of dynamic decision involving basically a proxy and a database in order to like customize the way those kind of requests are handled. One last thing I wanna show you, and sorry, I just realize I forgot it from the slide, but I don't want you to attempt to power through it without knowing all that you need to know.

[00:03:22] You do when you create these object stores-
>> Speaker 2: You're not sharing.
>> Mike North: Thank you. When you create these object stores, you need to make sure that you define what the ID, where the ID can be found on these different types of objects. Let me find the example real quick.

[00:03:42] There we go. So this would be in your upgrade hook here. You'll notice that we have key path of id. So that basically says, I wanna put objects into the store. And you can expect to find the primary key for these documents under the property name id. So make sure you add that as an option when you're creating your object store.

[00:04:16] This is a great read me by the way. I don't wanna attempt to copy and paste it into slides because it has tons of examples for a key value store. This is almost like a little store object that's wrapped around IndexedDB. So definitely take a look at this, jakearchibald idb on GitHub.

[00:04:37] All of your answers are there. So let's take 20 minutes for this. I will go through the solution, and then the next topic we'll be tackling is web push. We'll be sending, instead of pulling stuff from a server onto the client, we'll push from the server so that we can tell clients to do things even if your browser tabs are closed.

[00:05:00]
>> Speaker 2: How do I import idb into the-
>> Mike North: Gonna port idb from idb.
>> Speaker 2: Okay.
>> Mike North: Yeah, so the question was, how do we start using idb? Just like this.
>> Mike North: There you go. And you can see we're already starting to see, if you're using VSCode, you can already see a type completion here.

[00:05:24] So you can explore the API.