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

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

• javascript
• vue.js
• firebase-cloud-messaging
• service-worker
• quasar-framework

• Maybe this question/answer could help? stackoverflow./a/40635515/2022115 – Stef Chäser Commented Aug 27, 2021 at 8:42
• thank but I've already tried removing includeUncontrolled in the matchAll method and it doesn't work: the SW always opens a new tab – nulele Commented Aug 27, 2021 at 13:39
• Same problem here. I can either get it to bring the current tab into focus or to open a new tab with the new URL from the notification but I can never get it to open the new URL in the current tab – fromage9747 Commented Aug 6, 2022 at 8:52

1 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
  }
})