React app to work offline not able to cache files after deployment

I’m making react app to work offline for which I’m caching the files in sw.js file which is under public folder. The files are getting cached locally but when I’m deploying the app, it is not caching the files and giving the error – Uncaught (in promise) TypeError: Failed to execute ‘addAll’ on ‘Cache’: Request failed. Below is my sw.js file –
` let CACHE_NAME = “codePwa”;

var urlCache = [
"/manifest.json",
"/logo192.png",
"/",
"/index.html",
"/static/js/main.4d5113ea.js",
"/static/css/main.073c9b0a.css",
"./App.js",
];

/// install service worker
this.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlCache);
})
);
});

// fetch cache data

this.addEventListener("fetch", (event) => {
if (!navigator.onLine) {
console.log("offline");
if (event.request.url === "http://localhost:3000/static/js/main.chunk.js") {
event.waitUntil(
this.registration.showNotification("modeNet", {
body: "Offline",
icon: "http://localhost:3000/logo192.png",
})
);
}
event.respondWith(
caches.match(event.request).then((response) => {
if (response) {
return response;
}
let fUrl = event.request.clone();
fetch(fUrl);
})
);
}
});

this.addEventListener("activate", function (event) {
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames
.filter(function (cacheNames) {
//
})
.map(function (cacheNames) {
return caches.delete(cacheNames);
})
);
})
);
});`

What changes should I make so that after deploying the app, it’ll cache the files and when the app is offline and after refreshing the app fetch the file from the cache. I’m deploying my app on Netlify(url – https://calm-salmiakki-411347.netlify.app/)