javascript - 具有多个缓存的 Service Worker

Question

有许多示例可用于使用类似于以下内容的单个缓存来初始化 Service Worker:

let cacheName = 'myCacheName-v1';
let urlsToCache = ['url1', 'url2', url3'];

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(cacheName).then(function (cache) {
      return cache.addAll(urlsToCache);
    }).then(function () {
      return this.skipWaiting();
    })
  );
});

我希望在我的 service worker 上初始化多个缓存。动机是根据 Assets 的变化趋势(例如，静态应用程序数据与 css、javascript 等)对 Assets 进行分组。使用多个缓存，我可以更新单个缓存(通过版本化的缓存名称)作为缓存中的文件更改。理想情况下，我希望设置类似于以下的结构:

let appCaches = [{
    name: 'core-00001',
    urls: [
      './',
      './index.html', etc...
    ]
  },
  {
    name: 'data-00001',
    urls: [
      './data1.json',
      './data2.json', etc...
    ]
  },
  etc...
];

到目前为止，我最好的尝试是类似于:

self.addEventListener('install', function (event) {
  appCaches.forEach(function (appCache) {
    event.waitUntil(
      caches.open(appCache.name).then(function (cache) {
        return cache.addAll(appCache.urls);
      }));
  });
  self.skipWaiting();
});

这种方法似乎有效。但是，我仍然是 service worker 和 promises 的新手。有些东西告诉我，这种方法有一个陷阱，我太缺乏经验而无法识别。有没有更好的方法来实现它？

Answer 1

最好在处理程序中只调用一次 event.waitUntil，但好处是相对容易获得等待的单个 Promise。

类似的东西应该可以工作:

event.waitUntil(Promise.all(
  myCaches.map(function (myCache) {
    return caches.open(myCache.name).then(function (cache) {
      return cache.addAll(myCache.urls);
    })
  )
));

Promise.all采用 Promise 数组并仅在数组中的所有 promise 解析后解析，这意味着 install 处理程序将等待所有缓存初始化。