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