Workbox 没有覆盖默认策略

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

现在在 Dev 期间，我收到一条消息，指出 Workbox 正在 Dev Console 中使用 StaleWhileRevalidate，并且广播更新插件按预期工作。

如果您有更简洁的方法来实现此目的且 sw.js 文件中没有冲突策略，请随时发表评论。

谢谢！

Workbox 没有覆盖默认策略

Workbox not Overriding Default Strategy

nuxt.js

workbox