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-worker problem. 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/ (ie /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.

Answer 2

您应该在"start_url"提供 url，如果您使用的是本地主机，它应该包含下一个： "start_url": "http://localhost:8080/index.html" ,

Answer 3

Just a note... you notice above that the pages are being served over "https." But, if you have everything else right, and are not using https, you will get this same error message.

Answer 4

伙计们，一直在为同样的问题苦苦挣扎，只是发现我的 html 链接标签丢失了，请确保您指示您的清单文件位于网站标题的位置：

<link rel="manifest" href="/manifest.json">

Answer 5

Answered

• Go to your public folder,
• Go to your manifest.json file,
• Now add "start_url": "/", to the json object.
• See example below.

{ "name": "Occasionally Frustrated", "short_name": "Occasionally Frustrated", "start_url": "/", "display": "standalone" }