时间戳

首页 > 解决方案 > 使用 Workbox 管理具有多个 Service Worker 客户端的缓存

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

问题描述

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

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

我知道工作箱创建了两个缓存，一个用于预缓存，另一个用于运行时。因为我们有几个服务人员，我们的客户在访问新页面时有一个新的缓存条目

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

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

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

非常感谢

标签： service-workerworkbox

解决方案

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

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

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

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

如果您真的不能使用单个更高级别的服务人员，我建议您作为替代方案，不要将所有预缓存资产强制放入单个缓存中，而是为每个服务人员维护单独的、可能更小的预缓存，然后使用带有公共参数的运行时缓存cacheName来共享您知道的常见资源。我认为这不太可能容易出错。

推荐阅读