javascript - 什么会导致 Promise 在此处被 'InvalidStateError' 拒绝？

Question

什么会导致 Promise 在此处被 'InvalidStateError' 拒绝？

const SERVICE_WORKER_VERSION = "3.0.0"; // is updated in the build when things change
const CACHE_VERSION = SERVICE_WORKER_VERSION;

const fillServiceWorkerCache = function () {
    /* save in cache some static ressources 
    this happens before activation */
    return caches.open(CACHE_VERSION).then(function(cache) {
        return cache.addAll(ressourcesToSaveInCache);
    });
};

self.addEventListener("install", function (event) {
    /*event.waitUntil takes a promise that should resolves successfully*/
    event.waitUntil(fillServiceWorkerCache().then(function() {
        return self.skipWaiting();
    }));
});

在 Firefox 版本 52 上发生以下错误:Service worker 事件 waitUntil() 被传递了一个被拒绝的 promise ，并返回“InvalidStateError:尝试使用一个不可用或不再可用的对象” . service worker 在那之后被杀死并移除。它适用于 Chrome。 ressourcesToSaveInCache 是一个相对 URL 数组。

编辑更改为

event.waitUntil(
    fillServiceWorkerCache()
    .then(skipWaiting)
    .catch(skipWaiting)
);

然后 service worker 注册了!但是 fillServiceWorkerCache 被拒绝了，这是一个大问题(没有离线缓存)。现在的问题是为什么 fillServiceWorkerCache 会拒绝，错误消息试图告诉我们什么？

根据 Hosar 的回答进行编辑:

const fillServiceWorkerCache2 = function () {
    return caches.open(CACHE_VERSION).then(function (cache) {
        return Promise.all(
            ressourcesToSaveInCache.map(function (url) {
                return cache.add(url).catch(function (reason) {
                    return console.log(url + "failed: " + String(reason));
                })
            })
        );
    });
};

此版本在返回链中传播 promise ，使 waitUntil() 实际上等待它。它不会缓存，也不会拒绝未能添加到缓存中的单个资源。

编辑 2:修复 ressourcesToSaveInCache 中的无效相对 URL 后，错误消失了

Answer 1

很可能是img src 无效，如前所述here .
因此，使用 cache.addAll 如果其中一个请求无效，则不会保存任何请求。更好地使用: cache.add 如下:

return caches.open('cacheName').then(function(cache) {
      Promise.all(
        ressourcesToSaveInCache.map(function(url){cache.add(url)})
      );
    });

在这种情况下，所有有效的 url 都将被保存。