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

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

On Firefox version 52 the following error occurs: 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'. The service worker is killed and removed after that. It works fine with Chrome. ressourcesToSaveInCache is an array of relative URLs.

Edit changing it to

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

and the service worker registers ! However fillServiceWorkerCache rejected , which is a big deal (no offline cache). Now the question is why does fillServiceWorkerCache reject, and what is the error message trying to tell ?

Edit inspired by Hosar's answer:

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

This version propagates a promise in the return chain, making the waitUntil() actually wait for it. It will not cache and also not reject for individual ressources that failed to be added in the cache.

Edit 2: After fixing invalid relative URLs in ressourcesToSaveInCache, the error was gone

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

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

On Firefox version 52 the following error occurs: 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'. The service worker is killed and removed after that. It works fine with Chrome. ressourcesToSaveInCache is an array of relative URLs.

Edit changing it to

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

and the service worker registers ! However fillServiceWorkerCache rejected , which is a big deal (no offline cache). Now the question is why does fillServiceWorkerCache reject, and what is the error message trying to tell ?

Edit inspired by Hosar's answer:

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

This version propagates a promise in the return chain, making the waitUntil() actually wait for it. It will not cache and also not reject for individual ressources that failed to be added in the cache.

Edit 2: After fixing invalid relative URLs in ressourcesToSaveInCache, the error was gone

• javascript
• service-worker

1 Answer 1

Most probably is that an img src is not valid, as mentioned here.
So, with cache.addAll if one of the request is invalid none of the requests will be saved. Better use: cache.add as follow:

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

In this case all the valid urls will be saved.