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
Top comments (0)