Azure, MVC, and Service Worker - asp.net-mvc

Question

I have a simple website where I'm trying to Add To Homescreen function to the website. I'm using Visual Studio to code then I host it in Azure.
For some reason, it keep giving me this Failures: Manifest start_url is not cached by a Service Worker. every time I audit my website using Lighthouse.
I've make sure that all my page is cache by the service worker.
I'm not sure if it's my start_url or my service-workerproblem. Below is my code.
manifest.json
{
"short_name": "MY EXPERTS",
"name": "MYEXPERT",
"icons": [
{
"src": "Images/petronas_logo_192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "Images/petronas_logo_192.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#FFFFFF",
"theme_color": "#67BCFF",
"display": "standalone",
"start_url": "/Home/Index"
}
AddServiceWorker.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').
then(function (registration) {
// Registration was successful``
console.log('ServiceWorker registration successful with scope: ',
registration.scope);
}).catch(function (err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
service-worker.json
self.addEventListener('install', e => {
e.waitUntil(
caches.open('airhorner').then(cache => {
return cache.addAll([
'/',
'/?utm_source=homescreen',
'/Home/About',
'/Home/Index',
'/Home/Contact'
])
.then(() => self.skipWaiting());
})
)
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});