How to use MVC Bundling + Service Worker Cache - caching

Question

Problem
If I load the page without a service worker, everything is fine but when I introduce a service worker, the page does not load the first time (when online) because it is missing my bundled files which causes both CSS and Script issues. If I refresh the page then everything works because the service worker caches fetch requests when they occur.
Setup
Say I have a bundle such as
bundles.Add(new ScriptBundle("~/js/main").Include(
"~/Scripts/jquery-3.3.1.min.js",
"~/Scripts/moment.min.js",
"~/node_modules/sweetalert/dist/sweetalert.min.js"));
and a service worker in my root directory such as
var cacheName = 'v1:static';
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll([
'/images/keypad/number 0.png',
'/',
'/Menu/MainMenu',
'**TODO: Cache Bundles**'
]).then(function () {
self.skipWaiting();
});
})
);
});
self.addEventListener('fetch', function (event) {
if (event.request.method != "POST") {
event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}
fetch(event.request).then(function (fetchResponse) {
caches.open(cacheName).then(function (cache) {
cache.put(event.request, fetchResponse.clone());
});
return fetchResponse;
});
})
);
}
});
Question
How do I cache my bundled files in my service worker, in both Debug and Release mode because debug displays them as individual files while Release will combine them, and I don't know the URLs to the bundles?
Additional Thoughts
You can't put a Razor #... in this file because it isn't cshtml.
I don't want to list every file out in both places and maintain both.
I thought about using a server side handler to generate my service-worker.js file but I was wondering if there is an actual clean way to do this without going crazy.
Thank You!

Answer 1

#Scripts.Url("~/bundles/yourBundleName") use this to get the absolute URL for the URL from there you can get the bundle name map that into a variable and use that variable in service worker install event so that assets are cached on load itself.
note:
one mistake which i used to do Also please don’t refer serviceworker.js file directly in to index.html, this will be loaded at the time of registering from sw-registration.js file