Not able to retrieve offfline.html from service workers - progressive-web-apps

Question

I am working on PWA project. As per requirement, cached data is dynamic. Means, we are not using self.__WB_Manifest to cache the data. Instead of that, all the URL's sending over the API and storing those URL's under one cache.
Now issue is that, if certain html page, which is in same domain and same origin but not cached, in those case we want to show offline.html page.
Usually it will show if we use self.__WB_Manifest. But, as per requirement, we are not using it.
We do have offline.html page in cached data. Even it's present in folder structure, but it not triggering it.
Can anybody please help me guide on it, in case how to pickup the URL from cache and show as a offline page when app is in offline mode and particular page is not cached.
Currently using Workbox V6
addEventListener('fetch',async (event)=>{
console.log("add event listener fetch" + event);
event.respondWith(
caches.match(event.request).then(async (cachedResponse) =>{
console.log("inside cached response" + event.request.mode);
if (cachedResponse) {
console.log("fetch event if");
return cachedResponse;
}else if(!cachedResponse){
console.log("fetch event else");
return fetch(event.request);
}else{
const cache = await caches.open(OFFLINE_PAGES_RESPONSE);
return cache.match('/offline.html');
}
}).catch(async()=>{
console.log("inside cache");
const cache = await caches.open(OFFLINE_PAGES_RESPONSE);
return cache.match('/offline.html');
})
);
});