渐进式Web应用程序 - 服务工作者不提供start_URL

Question

正在使用渐进式网络应用程序。我试图让网络应用程序安装横幅工作但我在使用Lighthouse调试后继续接收service worker does not successfully serve the manifest's start_url（下图）。目前我正在使用azure托管我的网站。

新 我检查了所有缓存，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.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);
    })
  );
});

我的浏览器缓存：

Answer 1

来自Register A service worker，

  

如果我们在/example/sw.js注册服务工作者文件，那么服务工作者只会看到网址以fetch开头的网页的/example/个事件（即/example/page1/，{ {1}}）。

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

  

  
1. 在/example/page2/文件中定义start_url属性。
  
2. 确保您的服务工作者正确缓存与manifest.json的值匹配的资源。
  

另外，请检查此tutorial并查看它是否对您有所帮助。

Answer 2

仅需注意...您在上方注意到页面通过“ https”提供。但是，如果您没有其他任何问题，并且未使用https，则会收到相同的错误消息。

Answer 3

您应在10中提供该url，如果您使用的是本地主机，则应包含下一个：Foo，

Answer 4

有些人一直在努力寻找相同的问题，只是发现我的html链接标记丢失了，请确保您指示清单文件在网站标题中的位置：

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

Answer 5

已回答

• 转到您的公共文件夹，
• 转到您的 ma​​nifest.json 文件，
• 现在将 "start_url": "/", 添加到 json 对象。
• 见下面的例子。

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