Question

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

每个网络应用都托管在不同的文件夹中。

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

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

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

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

实际上我在vanilla.js上编码，没有角度，没有反应，没有vue，没有虚无.../ / p>

Answer 1

这里要记住两件事：

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

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

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

，例如：

registration.scope

Answer 2

我不知道，但是被接受的答案对我没有用，因为它有错别字以及我认为缺少的代码。我把对我有用的东西放在下面。尽管我不想从接受的答案中获得任何荣誉，但只是添加一个有效的代码，这将对其他人有所帮助。

self.addEventListener('activate', (event) => {
  const cleanup = async () => {
    const cacheNames = await caches.keys();// here it should be caches
    console.log(cacheNames);
    const cachesToDelete = cacheNames.filter(      
    (cacheNames) => (cacheNames.startsWith(`${registration.scope}!`) && cacheNames !== CACHE_NAME));
    console.log(cachesToDelete); 
   // await Promise.all(cachesToDelete.map(caches.delete));// this line rewritten to make it working.
    await Promise.all(cachesToDelete.map(CACHE_NAME=>{ 
      return caches.delete(CACHE_NAME);
    })
    )    
  };  
  event.waitUntil(cleanup());
});

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

2 个答案: