使用 webpack-workbox-plugin 中的GenerateSW时未检测到匹配的服务工作者

Question

我包括

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

在我的 webpack 配置的插件中，但在我的网站上运行 lighthouse 时收到此警告。

Web 应用程序清单或 Service Worker 不满足可安装性要求 1 个原因

Service Worker 是一项技术，使您的应用程序能够使用许多渐进式 Web 应用程序功能，例如离线、添加到主屏幕和推送通知。通过正确的 Service Worker 和清单实施，浏览器可以主动提示用户将您的应用添加到他们的主屏幕，这可以带来更高的参与度

失败原因--未检测到匹配的服务工作线程。您可能需要重新加载页面，或者检查当前页面的 Service Worker 范围是否包含清单中的范围和起始 URL。

不注册控制页面和 start_url 的 Service Worker Service Worker 是一项使您的应用程序能够使用许多渐进式 Web 应用程序功能的技术，例如离线、添加到主屏幕和推送通知。

我可以看到服务工作人员正在我的控制台中运行，因为它打印

LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i>         108 URLs, totaling 10.4 MB.

---

我可以在这次讨论中找到有关编辑sw.js文件或其他内容的所有解决方案。我认为GenerateSW函数的要点是我不必担心创建一个sw.js或任何东西

---

我也在使用WebpackPWAManifest

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

---

更新：我可以通过将其添加到我的App.jsx

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('/service-worker.js');
    });
}

但如果我这样做，那么在开发模式下对我的网站的更新不会注册，例如，我会将一些文本从“TODO”更改为“TODO：”并刷新页面，但页面仍会显示“TODO” ”