Today we are building our First Offline Web page with the Help of Service Workers.

What is Service Workers?

Service Workers can run BackGround In our browsers without user Interaction. They work on There Own thread and work even the browser closes / site closes.

Service Workers run only on Secured Sites like (https) at the time development it will work on localhost.

Today we are using the service Workers to Build Our Offline Web page.

First, we need to check if the service workers are available in Browser.

this our script.js file code.

what the above code does if there is service worker in navigation

if it is then run these code inside the block.

we need to create the empty sw.js file and we need to specify the path of a sw.js file in register method.

Register method gives us back a promise if it is successfully registered
then we are good to go otherwise some problem occurred during the registration.

Now we are in Sw.js file

they are different life cycle events service worker offers us
which are install, activate, fetch?

First, we need to install the service worker for that we need to write some code.

Install Event

self.addEventListener('install',function(){


})

it looks like these

At the time of installing we need to open the cache and put our static assets in the cache.

event.waitUntil() takes the Promise so that it waits until the promise
resolves. Like please wait until assets are put inside the cache.

I'm skipping the activate event we already cached our static assets in the cache name of*'my-cache-1'*.

Now we want to access the cache and use the assets inside the cache instead of sending the network request.

Fetch event

What it does first it checks the requested file is in the cache if yes use it or send a network request.

Wow, we are successfully completed our simple offline web page

These is our final output try your own if you have any doubts feel free to ask.

Happy coding...

Resources

• Cache Api

• More About Service Workers