Question

我的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的行为方式是否有所不同？

Answer 1

好！真是愚蠢的疏忽。在将诺言链分解成单独的诺言并逐步执行代码之后，问题变得很明显。

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();
});

我从未将诺言链返回给map函数（没有明确的return总是返回undefined）。因此，传递给Promise.all的数组仅包含undefined个值。因此，它立即解决，因此在其他消息之前记录了其消息。

生活和学习...

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

1 个答案: