CODEWITHSUNDEEP
javascriptservice-workeraddeventlistener
Ishan Hettiarachchi
Ishan Hettiarachchi

Reputation: 1714

window.addEventListener doesn't throw an error or go into the function

We are getting the following error in our code and I cannot figure out what the error is. It doesn't the function which contains the service worker registration ('load' event listener) or to the function in "error" event handler. Is there any other debugging mechanism I can see why my service worker is not getting registered?

By the way, same code works fine in Chrome 104 (104.0.5112.102), but not in 105,106 107, or in Edge. Is there an upcoming change?

            window.addEventListener("load", function () {
              navigator.serviceWorker
                .register("mservice-service-worker.js")
                .then(function (registration) {
                  console.log("ServiceWorker registration successful with scope: ",registration.scope);
                })
                .catch(function (err) {
                  console.log("ServiceWorker registration failed: ", err);
                });
            });
            window.addEventListener('error', function(event) {
              console.log("Got an uncaught error: ", event.error)
            })

Our code is written in AngularJS 1.8

Upvotes: 0

Views: 1214

Answers (2)

Filip Frîncu
Filip Frîncu

Reputation: 11

I think I've encountered the same issue, but in React. I've tried to register the service worker in a component and the "load" event did not triggered.

I've reported the bug on the chromium website and it seems like the issue started with Chormium version 104.0.5084.0.

The issue is present in all Chromium based browsers like Brave and Edge.

You can follow the progress here: https://bugs.chromium.org/p/chromium/issues/detail?id=1372748

Upvotes: 1

traktor
traktor

Reputation: 19354

From comment discussion the code is not working because the load event has been and gone and the added event listener is never executed.

As a work-around you could check before adding the listener and call it if already loaded:

const startWorker = function () {
  navigator.serviceWorker
    .register("mservice-service-worker.js")
    .then(function (registration) {
      console.log("ServiceWorker registration successful with scope: ",registration.scope);
    })
    .catch(function (err) {
      console.log("ServiceWorker registration failed: ", err);
    });
};

if( document.readyState != "complete") {
  window.addEventListener("load", startWorker);
}
else {
  startWorker();
}

This doesn't solve whether the new behavior is a bug or not. It is conceivable that a race condition existed in version 104 and earlier that has only come to light because of improvements introduced in 105. It is also conceivable that 105 introduced a bug. Analysis of modular script loading and possibly deferred script usage may shed some light on the exact nature of the problem.

Upvotes: 0

Related Questions