I have implemented a service worker for my Quasar PWA to handle FCM web background notifications. The main objective is to manage clicks on foreground and background notifications and direct the user to a specific page on my PWA.
When I receive a notification, there are two scenarios:
Foreground notifications:
- 1a) If the browser is focused/maximized and the user is already on the PWA tab with the correct page -> no action needed
- 1b) If the browser is focused/maximized and the user is already on the PWA tab but not on the right page -> I need to redirect to the specific PWA page
Background notifications:
- 2a) If the browser is not focused or minimized or the user is not on the PWA tab but on the correct page -> focus/maximize the browser or switch to the PWA tab and then no further action required
- 2b) If the browser is not focused or minimized or the user is not on the PWA tab and on another page -> focus/maximize the browser or switch to the PWA tab and then redirect to the specific PWA page
Everything functions correctly in scenarios 1a, 1b, and 2a. However, I encounter a strange error in scenario 2b: "This service worker is not the client's active service worker".
I have added the following code to the service worker to manage redirection upon clicking on background notifications. The error occurs at 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 have tried searching for this error online but couldn't find any relevant information, making it difficult to understand and resolve. Can anyone offer assistance, please? Thank you