什么会导致 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 event waitUntil() was passed a promise that rejected with 'InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable'. service worker 在此之后被杀死并删除。它适用于 Chrome。 ressourcesToSaveInCache 是一个相对 URL 数组。

编辑更改为

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

服务人员注册！然而 fillServiceWorkerCache rejected ，这是一个大问题（没有离线缓存）。现在的问题是为什么 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));
                })
            })
        );
    });
};

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

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

Answer 1

很可能是 img src 无效，如前所述 here。
因此，使用 cache.addAll 如果其中一个请求无效，none 的请求将被保存。更好地使用：cache.add如下：

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

在这种情况下，将保存所有有效的网址。

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

What can cause a Promise rejected with 'InvalidStateError' here?

javascript

service-worker