• Service workers essentially act as proxy servers that sit between web applications, the browser and the network(when available).
• A service worker is a piece of JavaScript code that runs in your browser on a separate thread from the main thread.
• The service worker has a separate thread, so it does not block your main thread.
• It will work only on HTTPS because of security issues.
• Service workers can not access the DOM because it runs on a separate thread.
• Service workers can't even access the web storage APIS like local, session storage, etc.
• Use service workers In order to cache the assets, although you have CDNS or caching.
• Service work plays a very important role that people underestimate, and if you leverage it in the right way, then it will take you to the next level.

Check if a service worker is supported by our browser:

if(navigator.serviceWorker){
  //register the service worker.
  navigator.serviceWorker.register("your/service-worker.js file path")
  .then(res =>{
    console.log("service worker registered successfully.")  
  })
  .catch(error =>{
    console.log("error registering service worker.")  
  })
}

Service worker scope: if you don't provide any scope, then it will be root level, but you can also provide a specific portion of the application(specific folder level).

navigator.serviceWorker.register("service-worker.js", {
  scope:"./path/folder"
})
self.addEventListener("install", (event)=>{
  // execute on the page load  
})

activate: it is used to clean up the useless cache.

self.addEventListener("activate", (event)=>{})

fetch: fetch event triggers every time when a file is requested from the server.