javascript - 工作箱缓存版本控制最佳实践

Question

我需要在每次发布后“清除”或“无效”Workbox SW 缓存。

这就是我打算做的(当然是虚拟版本)，但我没有足够的经验来理解这是否是正确的方法:

importScripts(...);

const version = 1;
const workboxSW = new WorkboxSW();

workboxSW.router.registerRoute(/\.(?:png|gif|jpg|svg|json|js|css|woff|mp3)$/,
    workbox.strategies.cacheFirst({
        cacheName: 'static-cache-' + version
    })
);

并在每个版本中增加版本:)
我应该从以前的版本中清除每个文件吗？
有不同的方法吗？

tnx 用于反馈

Answer 1

这对我来说很有意义，但是您应该确保当激活事件发生时，您清除所有不需要的旧缓存。

一个非常基本的方法(假设您可以完全清除缓存)是删除当前存在的所有缓存)。

// Clean up caches in activate event to ensure no pages
// are using the old caches.
self.addEventListener('activate', (event) => {
  const promiseChain = caches.keys()
  .then((cacheNames) => {
    // Step through each cache name and delete it 
    return Promise.all(
      cacheNames.map((cacheName) => caches.delete(cacheName))
    );
  });

  // Keep the service worker alive until all caches are deleted.
  event.waitUntil(promiseChain);
});

您可能希望更聪明地使用此逻辑(即检查版本号或仅删除您知道的缓存名称)。