时间戳

首页 > 解决方案 > 即使它显示在应用程序中，灯塔也没有检测到服务工作者

progressive-web-apps - 即使它显示在应用程序中，灯塔也没有检测到服务工作者

问题描述

我有我的 PWA 工作。检测到清单，服务工作者被注册。

但是，Lighthouse 似乎无法检测到服务人员。它说

Does not register a service worker that controls page and start_url
This origin has one or more service workers, however the page (https://beegle.app/beeglepro) is not in scope.

但是，我确实在注册服务人员并使用范围。清单中也提到了范围和起始 URL。

您可以在https://beegle.app/beeglepro查看我的 pwa，并自己查看问题。

这是清单文件 ( https://beegle.app/bpro-manifest.json ) 的样子

{
  "name": "Beegle Pro",
  "short_name": "Beegle Pro",
  "icons": [{
    "src": "/beegle-logo-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "/beegle-logo-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "/beegle-logo-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "/beegle-logo-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "/beegle-logo-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "/beegle-logo-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/beeglepro/",
  "scope": "/beeglepro/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#DEEC02"
}

下面是调用 service worker 的方式：

<script src="/bpro-install.js"></script>
<script>
// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/bpro-service-worker.js', {
  scope: '/beeglepro/'})
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}
</script>

有人可以建议可能出了什么问题吗？

我不知道如何在服务人员中提及 start-url。这可能是个问题吗？

标签： progressive-web-appsservice-workerlighthouse

解决方案

这里只是一个猜测，但您的资产的路径是否缺少“资产”？

  "src": "assets/beegle-logo-128x128.png",

推荐阅读