渐进式 Web 应用程序 - Service Worker 未提供服务 start_URL

Question

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

新：我检查了我所有的缓存，start_url，还有我的 service worker 以查看所有内容是否匹配。但它仍然给我同样的错误。

我不确定这是我的 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、

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/).

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

Define a start_url property in your manifest.json file.

Ensure that your service worker properly caches a resource that matches the value of start_url.

另外，检查这个 tutorial 看看它是否对你有帮助。

Answer 2

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

Answer 3

请注意...您注意到上面的页面是通过 "https." 提供的，但是，如果您其他一切都正确，并且没有使用 https，您将收到同样的错误消息。

Answer 4

伙计们，一直在为同样的问题而苦苦挣扎，只是发现我的 html link 标签丢失了，请确保您指出了清单文件在您网站上的位置 header:

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

Answer 5

已回答

转到您的 public 文件夹，
转到您的 manifest.json 文件，
现在将 "start_url": "/", 添加到 json 对象。
参见下面的示例。

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

渐进式 Web 应用程序 - Service Worker 未提供服务 start_URL

Progressive Web App - Service Worker not serving start_URL

javascript

visual-studio

web

progressive-web-apps

已回答