How to solve service worker navigate "This service worker is not the client's active service worker" error?

Viewed 488

I've created a service worker for my quasar pwa to manage fcm web background notifications. The purpose is to manage click on foreground and background notifications and redirect user to specific page of my pwa.

So when I get a notification I have two scenario:

foreground notifications:

  • 1a) the browser is focused/maximized + the user is already on the pwa tab + the pwa is on the right page -> nothing to do
  • 1b) the browser is focused/maximized + the user is already on the pwa tab + the pwa is on another page -> I have to redirect to the specific pwa page

background notifications:

  • 2a) the browser is not focused or minimized or the user is not on the pwa tab + the pwa is on the right page -> I have to focus/maximize the browser or focus the pwa tab and then nothing else to do
  • 2b) the browser is not focused or minimized or the user is not on the pwa tab + the pwa is on another page -> I have to focus/maximize the browser or focus the pwa tab and then redirect to the specific pwa page

Everything works fine in 1a, 1b and 2a. For 2b I get this weird error "This service worker is not the client's active service worker".

I have the following code in service worker to manage redirect on background notification click. And I get the error on the navigate() method.

self.addEventListener('notificationclick', function(event) {
    console.log('notificationclick', event);
    event.notification.close();

    let route = event.notification.data.route ? JSON.parse(event.notification.data.route) : null;
    if(route && route.params && route.params.token) {
      const domain = route.domain;
      const path = '/#/' + route.name + '/' + route.params.token;
      const fullUrl = domain + path

      event.waitUntil(clients.claim().then(() => {
          return clients.matchAll({
            type: 'window',
            includeUncontrolled: true
          })
          .then(clients => clients.filter(client => client.url.indexOf(domain) !== -1))
            .then(matchingClients => {
              if (matchingClients[0]) {
                return matchingClients[0].focus().then(function (client) {
                  client.navigate(path)
                    .then(client => {
                    }).catch(function (e) {
                    console.log(e); --> here I get the error
                  });
                }).catch(function (e) {
                  console.log(e);
                });
              }

              return clients.openWindow(fullUrl);
            })
          })
      );
    }
  });

I searched for this error on the web but didn't find any reference so I don't understand the error and cannot solve it. Anybody can help please? Thanks

0 Answers
Related