service-worker - Workbox 不能在 localhost 上工作，但它可以在 127.0.0.1 上工作

Question

我创建了一个项目workbox-webpack-plugin，当它运行时127.0.0.1:8080，请求加载我的service-worker.js并且它正在工作，如下所示：

但是当它运行时localhost:8080，请求不会加载我的service-worker.js，只是加载manifest.json。发生了什么？这是正常的吗？

workboxOptions: {
    importWorkboxFrom: 'local',
    clientsClaim: true,
    runtimeCaching: [
      {
        urlPattern: new RegExp('^http://localhost:8080/'),
        // Defaults to `networkFirst` if omitted
        handler: 'cacheFirst',
        options: {
          cacheName: 'my-app-cache',
          expiration: {
            maxEntries: 10,
            maxAgeSeconds: 300
          }
        }
      }
    ]
  }

Answer 1

使用 Chrome 开发人员工具检查控制台日志，以找出您的服务人员出了什么问题。重要的是要考虑服务工作者仅在 https 下或环回 ipv4 地址 (127.0.0.1) 上运行。另外，检查您的主机是否从 localhost 解析 127.0.0.1。

Answer 2

我在使用 WebPack 4 时遇到了同样的错误。对我来说，问题是我eval-inline-sources在 5MiB 的 JavaScript 之上，由于某种原因，它爆炸到超过 20MiB 的代码 WebPack 无法处理缓存，并且(failed) net::NET_ERROR

我的解决方案是切换到 true source-map，它并没有明显变慢并解决了问题。他们可能在较新版本的 fetchWrapper.js 中有它，但是从 Workbox 5 开始，大于 2MiB 的文件无论如何都会被排除在预取之外。

https://webpack.js.org/configuration/devtool/