Workbox在本地主机上不起作用，但在127.0.0.1上起作用

Question

我用workbox-webpack-plugin创建了一个项目，当它在127.0.0.1:8080上运行时，请求加载我的service-worker.js，它是这样工作的：

​

但是当它在localhost:8080上运行时，requests不会加载我的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

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

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