Caching Images Practice

[00:00:00]
>> Now if you're following along with instructions, we will get into the next chapter, that's cache storage. So it's chapter four, cash storage, caching images. We are already caching the menu, so we know that on IndexedDB, we are caching the menu, right? So, but what about images? Because I have images, so if I'm offline, I have the menu but I don't have the images.

[00:00:28]
Well, maybe we can cache images. So for that, we're going to without the service worker, okay? So I'm going to show you how the API works first without the service worker. So within the Menu.js, that's where we were right now. In the load method, maybe at the end before rendering or after rendering, it doesn't matter, I can try to also download all the images, okay?

[00:00:59]
And you will see how this works. So first, I should check if I do have data, why? Because maybe or if the length is greater than zero, maybe there is an error I don't have data so the rest of the code will not work because I'm going to loop through the data and if it's not an array, it's gonna work and blah blah blah.

[00:01:20]
So I'm just checking this. So how the caches API work. So it's actually promise-based by default. Remember IDB that has OpenDB? Well this one is caches.open and a name For example coffee master prefix images. That's all. So we wait for that. And we save this in a cache reference file like so.

[00:01:51]
As simple as this. We open the cache and if it doesn't exist, it will create it as IndexedDB. So there is no new or create, it's just the same open. So in this case, it's like opening a folder where now the browser will be ready to install data.

[00:02:09]
Make sense? So now I will start looping through the data that I have and I will say for each category that I have, I'm going to talk to that cache, and then go in the cache. In the cache, I can add one element or a lot of elements.

[00:02:27]
So I can add one request. I'm adding a response using a request as a key. So I can just say here I want to add index html just for you to understand what I'm doing here. So I can add a URL and then the browser will go, will download that URL and it will store the response in the cache.

[00:02:49]
Of course I don't want this and instead of add, there is an addAll. AddAll receives an array use of resources. So what I can do is I can add all and I can take my categories or my category, one category and I can say for the list of products that I have there, I can do a map.

[00:03:16]
How are you with functional programming? So if you're coming from react, you're pretty used to that. So I can take every product that I have and what I need is the image. There is an let's review the JSON. So we have the product's array and every product has an image, okay?

[00:03:38]
So something like this. The problem is this is not gonna work because this is going to add an array of images throughout all but not the full path of where the image resides, just the image name. So that's why I need to put this in a string. And right now they are in data images.

[00:04:02]
They are here. What I'm doing here is that every time I'm loading, I'm also going to the network and I'm caching all the images in the cache storage of the browser under a name, okay? Let's see. So I'm going back here to Coffee Masters, I'm going to refresh.

[00:04:25]
How do I know if this is working? Well within application, it's not within storage, so it's not here. If we scroll down a little bit, we have a section for cache. And here I have my cache storage. I can open this and I see my cm-image storage prefixed.

[00:04:46]
And if I click there, I can see all the files that were cached. And if I click on those files, I can preview the files, so they are there. Where? Client side, all the files were downloaded in my device. And if I have persistent storage, they're not going to be removed by storage pressure like the standard HTTP browser cache.

[00:05:16]
Remember, this goes to my quota and to the persistence of my storage. Do you have any questions? No? I mean the problem is that I'm not using those images. I mean I have downloaded those images, the browser has those images. I have access to those, but I'm not using them, okay, yet.

[00:05:38]
So there are two options to actually use now this cache API. One is to query because I could query. Let me do that from the console. So I can await, I can say hey caches API, I wanna see if you match this request. I can pass a request or a URL such as data, images and let me take the name of one image.

[00:06:05]
Data images like blacktea.png. So and I'm going to await for that. This is going to search in the cache to see if there is any cache that contains that URL. And it's given me an HTTP response in return. So I have the body there. So I could pass the body as JSON or as array buffer, and do something with it.

[00:06:35]
In JavaScript, I have the status text, this is like making a fetch. This is the object that you will receive from a fetch. But I'm not doing a fetch. I'm just making a request to the local cache. And the object that they're receiving return is the same. And if it doesn't exist, I'm not getting a 404.

[00:06:54]
So if it doesn't exist, I'm getting undefined in return. So if the query has no results, it's not giving me any response in return. Make sense? The problem is that working with images like this, it's complicated because how can I take that response and take that response to the IMG element in the HTML?

[00:07:19]
I'm not saying you can't, but you need to do an array buffer or a blob and work with the IMG, the DOM. I mean I can but there are better ways, okay? What's the other way? The service worker.