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

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

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

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

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

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

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

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

解决方法:

这里要记住两件事：

>只要每个服务工作者都有自己独特的scope,就可以为给定的origin注册任意数量的服务工作者.听起来你已经这样做了,注册了一个顶级服务工作者,范围是/然后将其他服务工作者限定为运行每个独立Web应用程序的路径.
> Cache Storage API(和其他存储机制,如IndexedDB)在整个原点共享,默认情况下没有“分片”或命名空间隔离.

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

假设这是正在发生的事情,我建议遵循的模型是在创建缓存时将registration.scope的值包含在缓存名称中.当需要删除激活处理程序中的旧缓存条目时,很容易确保只清理特定服务工作者应该管理的缓存,方法是过滤掉与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))
  );
});

标签：javascript,caching,service-worker
来源： https://codeday.me/bug/20190930/1836620.html