My service worker is not rendering the offline.html page that I have created. It's just showing the real web page before clearing cache. After clearing cache it is showing the usual connection lost page in offline mode instead of showing the offline.html page I have created. I have unregistered it one time. That's the reason for it. I'm attaching the screenshot of serviceworker.js file here: serviceworker.js. It is a react app I converted to PWA.
Here is my serviceworker.js:
const CACHE_NAME = "version-1";
const urlsToCache = ["index.html", "offline.html"];
const self = this;
//installing SW
self.addEventListener("install", event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log("Opened Cache")
return cache.addAll(urlsToCache)
})
)
})
//fetching request
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(() => {
return fetch(event.request)
.catch(() => caches.match("offline.html"))
})
)
})
//activating SW
self.addEventListener("activate", event => {
const cacheWhiteList = [];
cacheWhiteList.push(CACHE_NAME)
event.waitUntil(
caches.keys()
.then(cacheNames => Promise.all(
cacheNames.map(cacheName => {
if (!-cacheWhiteList.includes(cacheName)) {
return caches.delete(cacheName)
}
})
))
)
})