Hello and welcome to this video.
In this video, I'm going to be implementing offline access to our app using cash.
This is going to be a two part video.
I'm going to be using the service worker to implement the caching for the application.
The first thing I'm going to do is to create a variable that is going to store the name for the cache.
I'm going to create another variable that is going to store all the URL for the application that contains
the resources we want cached.
So I'm going to create the variables are both the event list, not online.
Number one is the name I want to call the cache of Kodi to do App Dash of light.
It's going to be stored in a variable called cache name, which is a constant.
That means I don't expect it to change on line number two.
I've got another constant called pre cache, and this is going to be an array that's going to store
all the URLs for the resources I want to cast.
So line number three here is the root of the application.
So some of this is the root of the application that we want that cached.
I want the indexed HTML cached.
I want they say it has file cache.
I want the script to JavaScript file cached and also on the manifest file cached.
Now that I've defined what I want to be cached.
We need to implement the caching inside the event listener.
So after Line 14 here, I'm just going to tab down and add the block of code that will do the caching.
So I've added a block of code from line 14 to line 16 that will do the caching event.
Listeners are mainly asynchronous in operation.
So we have to tell the event listener to wait until all the URLs that we have specified have been fully
cached.
We want it to be fully cached before the event listener exits the operation on line number 14.
We have the event object, which basically has a method that is called wait until and we have to pass
in a promise that will execute completely before our event listener exits.
This is because we want all the resources to be fetched from the server and cached completely before
the event listener exits.
Online, May 15.
We have an object that is called caches, and we use that object to open up.
The cache is in the name of the cache, and once it is open, we will work with that cache by adding
the URLs to the cache using the method called add or.
And inside the method called Add.
Or we pass in the variable that contains all the URLs of the resources we want to cache to that little
block of code.
There should do some caching for the application, so I'm going to save what I've done.
So I've opened up the application inside the Chrome developer tool from the menu items.
Here, I'm going to click on the application option and then click on storage.
And if you look on the storage, on the the storage option, here we can see we have two sets of storage.
We have the cache storage and then we have the service worker.
So if I browsed down, where is court cache, I expand that.
You can see the name of the cache I've specified.
That's the name of my cache and that is the URL that it is caching from.
So if I click on the link for the cache, we can see everything that it has cached.
These are all the URLs that had been cut.
You can see the responses, you can see the content.
And this is the content length and all the information.
So if I click on one of the cached resources you can see in, you can see a preview of what has been
cached.
You can also take a look at the header if you click on the service workers here.
The service worker version number should always change when there has been an update to the application.
So on the next update, my service will.
Should be to nine eight now that our resources have been cashed.
Let's see if we can access them offline.
So from the application, tap where we've got service worker, we can check this offline box when you
check that the same for network comes on, which means that you no longer on the network.
So if we click on the network, tap here we can see that it's turned off lights.
If I click on the dropdown, there are different options.
You can also trot all that is emulate with different speeds, for example, 3G or 3G.
But once you took the offline button on from the application menu here on the the service worker, it
also switches it off in the Network tab.
So those are the two ways you can go offline.
Now that the offline check is on, let's refresh the page and see.
As you can see here in the emulator, he's saying no internet.
And we also cannot see any data from the application on the dropdown here.
There are different devices you can use to emulate your app.
So the default here is Moto G4, so you can try it on different devices if you wish to do so.
And also add your own custom one.
The reason we can't access the content of the application offline despite the resources being cast,
is because we have not told the service worker what to do after caching the resources.
So what we want to do inside the service workout, we want to add another event listener that will listen
out for fetch.
This will enable the application to hook into the event when a URL is fetched and take over that event
and then provide an actual HTTP response that will be displayed in the client.
We will implement that in the next video.
Thanks for watching.
Bye for now.