使用 Workbox 管理具有多个 Service Worker 客户端的缓存

Question

我最近在我们的网站上使用工作箱实现了一个服务工作者。由于我们项目的结构，我们正在为每个页面实现一个服务工作者，例如：

• /foo/XXX/
• /foo/XYZ/
• /foo/XXY/

这导致我们为每个页面创建了一个服务工作者。 另一方面，我们在构建过程中使用预缓存来预缓存 css 和 js 资产。

我知道 workbox 创建了两个缓存，一个用于预缓存，另一个用于运行时。因为我们有几个 service worker，所以我们的客户在访问新页面时会有一个新的缓存条目

• workbox-precache-https://www.example.com/foo/XXX-https://www.example.com
• workbox-precache-https://www.example.com/foo/XYZ-https://www.example.com
• workbox-precache-https://www.example.com/foo/XXY-https://www.example.com

我知道 workbox 提供了一个设置缓存名称的选项。

workbox.core.setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'custom-precache-name',
  runtime: 'custom-runtime-name'
});

我的问题是，我可以使用此选项将缓存名称设置为唯一吗？我的方法是所有资产都在同一个缓存中，因此工作箱将负责删除重复的缓存并管理缓存。有意义吗？

非常感谢

Answer 1

如果您在 Service Worker 脚本的最开始调用 workbox.core.setCacheNameDetails({suffix: 'my-suffix'})，并且您为在您的​​源上注册的每个 Service Worker 执行此操作，这足以让所有 Service Worker 使用公共缓存来进行预缓存资产。 （通常，当前服务工作人员的范围用作后缀，以防止冲突并确保每个服务工作人员都有自己的缓存，因此您将覆盖该行为。）

但是...我会犹豫是否真的这样做，或者至少在你这样做之前进行彻底的测试，因为你会让自己面临可能的问题。我会担心的一些事情：

• 通常，install 和 activate 服务工作者生命周期事件用于触发下载新资产 (install) 和删除过期资产 (activate)。默认情况下，activate 步骤（除非您使用skipWaiting）在关闭所有具有活动客户端的选项卡后才会触发，以确保不会删除任何仍在被选项卡使用的内容。如果您有多个服务工作人员，每个服务工作人员都有自己的范围和自己的生命周期事件，使用预缓存管理相同的缓存，那么一个服务工作人员的activate 事件可能会在标签打开时触发，但仍由不同的服务工作人员控制。这可能会导致条目在第二个选项卡仍可能使用时从预缓存中删除。

• 我会担心预缓存清单中的任何相对 URL，因为这些相对 URL 中的每一个都将使用当前服务工作者的位置作为基础来解析。如果您站点的每个路径都有不同的 URL 结构，或者如果 /foo/XXX/app.js 与 /foo/XYZ/app.js 根本不同，那么如果您共享单个缓存，则预缓存清单中的 ./app.js 条目最终会非常危险。

如果您真的不能使用单个更高级别的 Service Worker，我建议您作为替代方案，不要将所有预缓存资产强制放入单个缓存中，而是维护单独的、可能更小的预缓存每个 service worker，然后使用 runtime caching 和一个公共的 cacheName 参数来共享你知道的公共资源。我认为这不太容易出错。