Workbox不覆盖默认策略

Question

在Nuxt Workbox中有一些覆盖默认cacheFirst策略的问题。

预期行为: staleWhileRevalidate替换了cacheFirst

nuxt.config.js：

workbox: {
  runtimeCaching: [
    {
      urlPattern: '/_nuxt/.*',
      handler: 'staleWhileRevalidate',
      method: 'GET'
    }
  ]
}

当前行为:创建新条目而不是重写。

sw.js：

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'),
workbox.strategies.cacheFirst({}), 'GET')

workbox.routing.registerRoute(new RegExp('/.*'), 
workbox.strategies.networkFirst({}), 'GET')

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), 
workbox.strategies.staleWhileRevalidate({}), 'GET')

不确定我错过了什么。谢谢你的帮助。干杯！

Answer 1

我似乎已经通过添加nuxt.config.js解决了这个问题：

workbox: {
  cachingExtensions: '@/plugins/wb-ext.js'
}

那么我的wb-ext.js包含：

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), 
workbox.strategies.staleWhileRevalidate({
  plugins: [
    new workbox.broadcastUpdate.Plugin('new-update-channel')
  ]
}), 'GET')

这会将wb-ext代码添加到由Nuxt Workbox在sw.js文件中创建的自动生成的cacheFirst策略之上。

现在在开发期间，我收到一条消息，指出Workbox正在开发控制台中使用StaleWhileRevalidate，广播更新插件按预期工作。

如果您有一种更清晰的方法来实现这一点，而sw.js文件中没有冲突的策略，请随时发表评论。

谢谢！