I am trying to use service workers in Chrome on localhost:3000. My app is using AngularJS 1.5.

The service worker state is not activating. It is going from installing to redundant.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(function(registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
        } else if (registration.active) {
            serviceWorker = registration.active;
        }

        if (serviceWorker) {
            console.log("ServiceWorker phase:", serviceWorker.state);

            serviceWorker.addEventListener('statechange', function (e) {
                console.log("ServiceWorker phase:", e.target.state);
            });
        }
    })
    .catch(function(err) {
        console.log('Service Worker Error', err);
    });
}

Output of above script:

ServiceWorker phase: installing

ServiceWorker phase: redundant

service-worker.js is available at http://localhost:3000/service-worker.js. I don't see any error messages. What am I doing wrong?

I am trying to use service workers in Chrome on localhost:3000. My app is using AngularJS 1.5.

The service worker state is not activating. It is going from installing to redundant.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(function(registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
        } else if (registration.active) {
            serviceWorker = registration.active;
        }

        if (serviceWorker) {
            console.log("ServiceWorker phase:", serviceWorker.state);

            serviceWorker.addEventListener('statechange', function (e) {
                console.log("ServiceWorker phase:", e.target.state);
            });
        }
    })
    .catch(function(err) {
        console.log('Service Worker Error', err);
    });
}

Output of above script:

ServiceWorker phase: installing

ServiceWorker phase: redundant

service-worker.js is available at http://localhost:3000/service-worker.js. I don't see any error messages. What am I doing wrong?

• javascript
• angularjs
• service-worker
• progressive-web-apps

• 1 If sw bee redundant, there is an error in the sw no in the registry. If you show you sw code, it will be easier to help you. – Hosar Commented Dec 19, 2016 at 8:46
• 1 Try close all the tabs of you webpage. Service Workers will be reinstall only if there is no active tab is using it. – Tony Dinh Commented Dec 25, 2016 at 15:27
• Possible duplicate of service worker install event is called before register event is pleted – Paul Sweatte Commented Sep 19, 2017 at 15:24
• facing the same issue, did you find any solution? – Awn Ali Commented Dec 11, 2018 at 10:48

1 Answer 1

I faced the same issue and this is how I fixed it:

• Browse the page, which has the service worker running
• Navigate to chrome://inspect/#service-workers in chrome browser
• Find your service worker, which is in redundant state and click terminate

• Refresh your page which has the service worker

• Open developer console, go to the application tab and then service worker section. you should see the green icon with your service worker now.

• Add following function in your SW

  self.addEventListener("activate", function(event) { event.waitUntil(self.clients.claim()); });