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

【问题标题】：workbox cache versioning best practice工作箱缓存版本控制最佳实践
【发布时间】：2018-04-19 02:10:07
【问题描述】：

我需要在每次发布后“清除”或“无效”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 的反馈

【问题讨论】：

标签： javascript service-worker workbox

【解决方案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);
});

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

【讨论】：

您能否指出在何处/如何使用此代码。在这种情况下，什么是“自我”？谢谢。
在服务工作者 JS 文件中。在 JavaScript 工作者中使用 Self 来引用全局上下文。在这种情况下，我经常认为 self 指的是 service worker 本身，类似于你有 window 来指代浏览器窗口/选项卡。

【解决方案2】：

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

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

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

【讨论】：

不幸的是，我无法生成清单，页面加载文件基于类型，然后游戏引擎基于配置加载图像。所以会有很多变量，我不能将它们全部添加到预缓存中，或者打开一个游戏，你必须第一次下载所有游戏的所有资源。使用网络优先使工作箱变得毫无用处:(我打算将其用作本地缓存，而不是离线助手