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:
Cache
Background sync
Push Notifications
Offline Content
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:
Clean Code - Your code don’t end up looking like your caching your whole application with 50+ pages
Clean Cache - Your cache will have only those pages which the users visited.
Hence you are not polluting the user’s cache and only caching what the user demanded.
Here is the code:
The moment user request a page , the fetch will intercept the request
Fetch will return a promise .
We ll open the dynamiccaches and put the - caches.open
We ll put the request into the caches - caches.put with the response clone returned from the fetch promise
Return the response
If promise got rejected fetch will go to caches (pre-cache) to match the request URL request
In our current example we have below files are pre-cached:
The files which we are getting pre-cache
We have benefit.html which is not pre-cache We want to get benefit.html to be cached on-demand.
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
Cache - pre-cacheCache - dynamic-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.
Broken page while accessing the benefit.html
Now, connect back go to application and check the dynamic caches.
Updated Dynamic Cache
Go offline again and try to re-access the benefit.html it must be working perfectly.
