Question

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

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

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

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

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.core.setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'custom-precache-name',
  runtime: 'custom-runtime-name'
});

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

非常感谢

Answer 1

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

但是...我不愿意实际执行此操作，或者至少在进行操作之前先进行彻底的测试，因为您可能会遇到问题。我担心的一些事情：

通常，install和activate服务工作人员生命周期事件用于触发下载新资产（install）和删除过期资产（activate ）。默认情况下，除非关闭所有具有活动客户端的选项卡，否则activate步骤将不会触发（除非您使用的是skipWaiting），以确保不删除任何仍在使用的选项卡。如果您有多个服务工作者，每个服务工作者都有各自的作用域和生命周期事件，并使用预缓存来管理相同的缓存，那么当打开一个选项卡仍由其他服务工作者控制时，一个服务工作者的activate事件可能会触发。当第二个选项卡仍可以使用条目时，这可能导致条目从预缓存中删除。
我会担心您的预缓存清单中的任何相对URL，因为这些相对URL中的每一个都将使用当前服务工作者的位置作为基础来解析。如果您站点的每个路径具有不同的URL结构，或者/foo/XXX/app.js与/foo/XYZ/app.js根本不同，则在以下情况下，预缓存清单中的./app.js条目将非常危险：您共享一个缓存。

如果您真的不能使用单个更高级别的服务工作者，那么我建议作为替代方案，是不要将所有预缓存的资产强制放入单个缓存中，而是针对以下情况维护单独的，可能较小的预缓存每个服务工作者，然后将runtime caching与公用cacheName参数一起使用，以共享您知道的公用资源。我认为这样更容易出错。

使用Workbox与多个Service Worker客户端一起管理缓存

1 个答案: