渐进式网络应用程序 - 未提供服务的服务工程师start_URL

Question

正在玩渐进式网络应用程序。我试图让Web应用程序安装横幅工作，但在使用Lighthouse进行调试后（图片如下），我仍然收到service worker does not successfully serve the manifest's start_url。目前，我使用天蓝色来托管我的网站。

新： 我检查了我所有的缓存，start_url，还有我的服务人员看到一切都匹配。但它仍然给我同样的错误。

我不知道这是否是我的start_url或我service-worker问题。以下是我的代码。

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

我的浏览器缓存：

Answer 1

从Register A service worker注意到，

如果我们/example/sw.js注册服务工作者文件，然后服务人员将只能看到的网址以/example/开始页面fetch事件（即/example/page1/，/example/page2/）。

在线与显示的错误，并在此documentation给出，检查以下内容：

1. 在manifest.json文件中定义一个start_url属性。
2. 确保您的服务工作人员正确缓存与值为start_url相匹配的资源。

此外，检查该tutorial，看看它是否会帮助你。