在同一个域但使用不同文件夹的多个javascript服务工作者

Question

我的网站为每个客户提供一系列网络应用程序.每个客户端都有不同的应用程序组合,可以使用.

每个Web应用程序都托管在不同的文件夹中.

因此,我需要为每个客户端缓存它只允许的Web应用程序,而不是缓存所有应用程序,其中许多是用户根本不会使用的.

我天真地为网站的shell创建了一个全局服务工作者,并为每个文件夹或应用程序创建了自定义命名服务工作者.

但是我注意到在第一个服务工作者之后,假设sw_global.js服务工作者注册,安装,激活,成功获取并创建一个名为cache-global的缓存,第二个服务工作者,比如sw_app1,js,它创建了自己的缓存缓存 - app1,清除所有缓存全局.

如何为每个文件夹使用自定义服务工作者？请记住,每个文件夹都是微服务或Web应用程序,并非所有用户都允许这样做,因此不必缓存来自唯一服务工作者的所有内容.

实际上我在vanilla.js上编码,没有角度,没有反应,没有vue,没有nada.

Answer 1

这里要记住两件事:

1. 只要每个服务工作者都有自己独特的范围,就可以为给定的来源注册任意数量的服务工作者.听起来你已经这样做了,将一个顶级服务工作者注册到一个范围,然后将其他服务工作者注册到每个独立Web应用程序运行的路径./

2. 该缓存存储API(和其他存储机制,就像是IndexedDB)的整个起源共享,默认情况下没有"分片"或命名空间隔离.

将这两个事实放在一起,我的猜测是发生的事情是你在activate一个服务工作者的处理程序中有一些缓存清理代码,这些服务工作者的范围是特定的Web应用程序,并且该代码检索当前缓存名称的列表并删除任何缓存它认为已经过时了.这在服务工作者中是常见的事情,但是如果你没有考虑到caches.keys()将返回你的源中所有缓存的列表,甚至是由其他服务工作者创建的缓存的事实,你可能会遇到麻烦.实例.

假设这是正在发生的事情,我建议遵循的模型是registration.scope在创建缓存时包含作为缓存名称一部分的值.当需要删除activate处理程序中的旧缓存条目时,很容易确保只清除特定服务工作者应该管理的缓存,过滤掉那些不匹配的缓存registration.scope.

例如,像这样:

const CACHE_VERSION = 'v2';
const CACHE_NAME = `${registration.scope}!${CACHE_VERSION}`;

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      // Add entries to the cache...
    })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => cacheNames.filter(cacheName => {
      // Find the caches that belong to this scope, but don't match CACHE_NAME.
      return cacheName.startsWith(`${registration.scope}!`) &&
             cacheName !== CACHE_NAME;
    }).then(cachesToDelete => Promise.all(cachesToDelete.map(caches.delete))
  );
});