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

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);
});

您可能希望通过这种逻辑变得更聪明（即检查版本号或仅删除您知道的缓存名称）。

Answer 2

如果您想采用缓存优先策略，那么我建议将 Workbox 集成到您的构建过程中，并使用其内置支持来生成“预缓存清单”。此清单将确保您每次重新部署 Web 应用程序时预缓存的文件都保持最新。

https://developers.google.com/web/tools/workbox/#get_started有一些构建时集成入门指南

如果您选择不这样做，那么我建议不要使用缓存优先策略，而是使用网络优先之类的策略。