Блог

Возникли некоторые проблемы с переопределением стратегии cacheFirst по умолчанию в Nuxt Workbox.

Ожидаемое поведение: 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')
  

Не уверен, чего мне не хватает. Спасибо вам за помощь. Приветствия!

Казалось, я вроде бы решил это, добавив в 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 поверх автоматически сгенерированной стратегии cacheFirst, созданной Nuxt Workbox в sw.js файл.

Теперь во время разработки я получаю сообщение о том, что Workbox использует StaleWhileRevalidate в консоли разработчика, и плагин широковещательного обновления работает должным образом.

Не стесняйтесь комментировать, если у вас есть более чистый способ достижения этой цели без использования конфликтующих стратегий в sw.js файл.

Спасибо!