Progressive Web App - Service Worker not serving start_URL

Question

Was playing around with the progressive web app. I've trying to make web app install banner working but I keep receiving service worker does not successfully serve the manifest's start_url after I debugging using Lighthouse (Picture below). Currently I'm hosting my website using azure.

NEW: I checked all my cache, start_url, and also my service worker to see everything match. But it still gives me the same error.

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.js

 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);     })   ); }); 

My Browser Cache :

Answer 1

Noted from Register A service worker,

If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

Inline with the shown error and given in this documentation, check the following:

1. Define a start_url property in your manifest.json file.
2. Ensure that your service worker properly caches a resource that matches the value of start_url.

Also, check this tutorial and see if it will help you.