CODEWITHSUNDEEP
javascriptpromiseservice-workerservice-worker-events
Afiq Rosli
Afiq Rosli

Reputation: 385

Service Worker marked as redundant

The service worker won't installed and keep having its status into redundant. Refreshing the page will add more service worker in the redundant state (grey indicator).

I've tried console.log("installed") in the self.addEventListener function argument and it worked. The service worker is marked as activated and running (green indicator)

Below will make the service worker becomes redundant

self.addEventListener("install", function (event) {
    event.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            var newImmutableRequests = [];
            return Promise.all(
                immutableRequests.map(function (url) {
                    return caches.match(url).then(function (response) {
                        if (response) {
                            return cache.put(url, response);
                        } else {
                            newImmutableRequests.push(url);
                            return Promise.resolve();
                        }
                    });
                })
            ).then(function () {
                return cache.addAll(newImmutableRequests.concat(mutableRequests));
            });
        })
    );
});

Below will work, but it does not cache files

self.addEventListener("install", function (event) {
    console.log("installed");
});

I expect the service worker to be installed and able to cache files, but it goes into a redundant state instead.

Upvotes: 2

Views: 3225

Answers (1)

pate
pate

Reputation: 5263

Check the console for errors. The service worker will go into the "redundant" state if it fails.

There's at least one problem in your code:

return caches.match(url).then(function (response) {

should be cache without the s, right? caches is the global Cache API interface while cache, in your code, is a variable referencing a single cache instance.

Also, to make it easier to find bugs in your code, consider adding error handling. You don't have any Promise.catch handlers in your code so it's just swallowing all errors :)

Upvotes: 1

Related Questions