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

Question

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

Answer 1

I also couldn't get it working with client.navigate(path) no matter what I tried... and after several hours of searching and going down deep rabbit holes in GitHub, MDN docs, etc. I just ended up using the client.postMessage() interface.

In your code above replace client.navigate(path) with the following:

client.postMessage({
  action: 'redirect-from-notificationclick',
  url: path,
})

And then in your app code listen to this message:

// Listen to service worker messages sent via postMessage()
navigator.serviceWorker.addEventListener('message', (event) => {
  if (!event.data.action) {
    return
  }

  switch (event.data.action) {
    case 'redirect-from-notificationclick':
      window.location.href = event.data.url
      break
    // no default
  }
})