Service workers is the well know term now in web developers. All credits goes to the progressive web apps for the popularity of Service workers.
It won’t be wrong to say service workers are the backbone of the PWA. Most of the impressive features of PWA or the features which made PWA popular in industry in just a short span of time are dependent on the service workers only. Few of the features are:
In this article, we will be learning about On-Demand Dynamic Caching with service workers.
It is hard to make all files cached static in the service workers. Your file will end up look like something like this. Also, there could be the possibility that the user might not be visiting each and every page of your app then why to pollute their cache by installing so many files and slow down the phone. Wouldn’t be nice that we keep caching the pages as per the user visit the pages? And this is known as the Dynamic cache or cache on demand.
Why it is important:
In our current example we have below files are pre-cached:
We have benefit.html which is not pre-cache We want to get benefit.html to be cached on-demand.
Do check Video of same on Our channel : JSLovers
Now, go to to the browser and try to access the app. Everything will be working good. Go to the application and check both cache
Now, go offline, access the home page it must be working fine. As we have the index.html in cache. Now, access benefit.html and you must be seeing broken page.
Now, connect back go to application and check the dynamic caches.
Go offline again and try to re-access the benefit.html it must be working perfectly.