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

Share Improve this question Follow edited Dec 30, 2016 at 14:16 Walle Cyril asked Dec 29, 2016 at 23:27 Walle CyrilWalle Cyril 3,25744 gold badges2828 silver badges6060 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.