工作箱不覆盖默认策略

Question

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

预期的行为：cacheFirst由staleWhileRevalidate替换

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代码添加到由swxt文件中由Nuxt Workbox创建的自动生成的cacheFirst策略之上。

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

如果你有一个更清晰的方法来实现这一点，请随意评论，而不要在sw.js文件中有冲突的策略。

谢谢！