使用 webpack-workbox-plugin 中的 GenerateSW 时未检测到匹配的 Service Worker

编程问答 2022-04-25

问题描述

我包括

    new GenerateSW({
        maximumFileSizetoCacheInBytes: 6000000
    }),

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

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

Service Worker 是一种技术，可以让您的应用程序使用许多 渐进式 Web 应用程序功能，例如离线、添加到主屏幕和 推送通知。使用适当的服务人员和清单 实现，浏览器可以主动提示用户添加您的应用 到他们的主屏幕，这可以提高参与度

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

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

我可以看到 service worker 正在我的控制台中运行，因为它打印

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 WebpackPwaManifest({
      icons: [
        {
          src: Icon192,sizes: "192x192",type: "image/png",purpose: "any maskable",},{
          src: Icon512,sizes: "512x512",],name: "Example",short_name: "Example",orientation: "portrait",start_url: "/",scope: "/",theme_color: "#ffffff",background_color: "#ffffff",description: "Example",display: "standalone",prefer_related_applications: false,}),

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

来解决这个问题 
if ('serviceWorker' in navigator) {
    window.addEventListener('load',function () {
      navigator.serviceWorker.register('/service-worker.js');
    });
}

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsservice-workerwebpackwebpackwebpackworkboxworkbox-webpack-plugin