Javascript 服务工作者检测缓存已完成

我的PWA有很大的数据负载。我想显示一个“请稍候…”加载页面，等待所有缓存完成后再启动完整的应用程序。因此，我需要检测所有缓存何时完成。“我的服务人员”的代码片段是：

let appCaches = [{
    name: 'pageload-core-2018-02-14.002',
    urls: [
      './',
      './index.html',
      './manifest.json',
      './sw.js',
      './sw-register.js'
    ]
  },
  {
    name: 'pageload-icon-2018-02-14.002',
    urls: [
      './icon-32.png',
      './icon-192.png',
      './icon-512.png'
    ]
  },
  {
    name: 'pageload-data-2019-02-14.002',
    urls: [
      './kjv.js'
    ]
  }
];

let cacheNames = appCaches.map((cache) => cache.name);

self.addEventListener('install', function (event) {
  console.log('install');
  event.waitUntil(caches.keys().then(function (keys) {
    return Promise.all(appCaches.map(function (appCache) {
      if (keys.indexOf(appCache.name) === -1) {
        caches.open(appCache.name).then(function (cache) {
          return cache.addAll(appCache.urls).then(function () {
            console.log(`Cached: ${appCache.name} @ ${Math.floor(Date.now() / 1000)}`);
          });
        });
      } else {
        console.log(`Found: ${appCache.name}`);
        return Promise.resolve(true);
      }
    })).then(function () {
      // Happens first; expected last.
      console.log(`Cache Complete @ ${Math.floor(Date.now() / 1000)}`);
    });
  }));
  self.skipWaiting();
});

当我用模拟3G网络测试时，跟踪结果是：

---

我不理解为什么在记录任何单个“缓存”消息之前记录“缓存完成”消息；我希望这是最后一次。与其他承诺相比，Promise.all的行为方式有什么不同吗？

Oy！多么愚蠢的疏忽啊。在将承诺链分解为单个承诺并逐步完成代码之后，问题变得显而易见

self.addEventListener('install', function (event) {
  console.log('install');
  event.waitUntil(caches.keys().then(function (keys) {
    return Promise.all(appCaches.map(function (appCache) {
      if (keys.indexOf(appCache.name) === -1) {
        // Never returned the promise chain to map!!!
        return caches.open(appCache.name).then(function (cache) {
          return cache.addAll(appCache.urls).then(function () {
            console.log(`Cached: ${appCache.name} @ ${Math.floor(Date.now() / 1000)}`);
          });
        });
      } else {
        console.log(`Found: ${appCache.name}`);
        return Promise.resolve(true);
      }
    })).then(function () {
      console.log(`Cache Complete @ ${Math.floor(Date.now() / 1000)}`);
    });
  }));
  self.skipWaiting();
});

我从未将承诺链返回到

映射

函数（没有显式的

返回

始终返回

未定义

）。因此，数组传递给

Promise。所有
仅包含
未定义的
值。因此，它立即解决问题，并因此在其他人之前记录其消息


生活和学习