service-worker - 在开发中本地运行时工作箱冲突的缓存条目

Question

在开发模式下（本地）使用 Workbox Webpack 插件时，我收到以下 service worker 错误：

PrecacheController.mjs:62 未捕获的 add-to-cache-list-conflicting-entries：传递给“workbox-precaching.PrecacheController.addToCacheList()”的两个条目的 URL 未定义但修订详细信息不同。Workbox 无法正确缓存和版本化资产。请删除其中一项。

我相信这种情况正在发生，因为当 webpack 重新构建时，它似乎向 precache 调用添加了两次静态资产。一次在service-worker.js文件中，另一个在precache-manifest.XXX.js文件中。查看这两个文件，我可以看到在两个地方都添加了块和条目脚本，包括service-worker.js.

这在生产中不是问题，因为每个构建都会从头开始擦除和重建。

这是我的 Workbox Webpack 插件配置：

new GenerateSW({
  swDest: '../service-worker.js',
  globDirectory: 'priv/static',
  globPatterns: ['**/*.{js,css,png,jpg,gif,woff2}'],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/fonts\.googleapis\.com/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'google-fonts-stylesheets'
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.gstatic\.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 365, // one year
        }
      }
    },
    {
      urlPattern: /^https:\/\/logo.clearbit.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'clearbit-logos',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxAgeSeconds: 60 * 60 * 24 * 30, // approx one month
        }
      }
    }, {
      urlPattern: /^https:\/\/www.gravatar.com\/avatar\//,
      handler: 'NetworkFirst'
    }
  ]
})

标签： service-workerworkboxworkbox-webpack-plugin