I am integrating FCM push notifications in my Angular application and the Service Worker (SW) is successfully registered in Chrome as can be seen below:
The installation status is ACTIVATED and I do receive push notifications if I manually Start the SW but the issue is Chrome stops the SW as soon as it finds it unneeded for optimization but never restarts it in the event of push notification. Due to this, our clients are not able to get the notification after they close our website. I am using:
- Angular
v13 - Chrome
v102.0.5005.61
Below is the snippet of my SW that we are using to listen for 'push' event:
importScripts('./assets/js/async-waituntil.js');
importScripts('https://cdn.jsdelivr.net/gh/mozilla/localForage@master/dist/localforage.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-messaging.js');
(function () {
'use strict';
self.addEventListener('install', function (event) {
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
event.waitUntil(clients.claim());
});
removeAllEventListener('push');
self.addEventListener('push', (msg) => {
const itsGonnaBeLegendary = new Promise((resolve, reject) => {
let data = null;
if (msg && msg.data && msg.data.json()) {
data = msg.data.json();
}
if (data === null) {
resolve();
}
if (data.data && data.data['event'] && data.data['event'] === 'logout') {
const firebaseConfig = {
apiKey: '****',
authDomain: '****',
projectId: '****',
storageBucket: '****',
messagingSenderId: '****',
appId: '****',
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
return messaging.deleteToken();
}
if (!msg.data) {
resolve();
return;
}
self.clients
.matchAll()
.then((client) => {
try {
if (client.length > 0) {
try {
client[client.length - 1].postMessage(data);
} catch (e) {
resolve();
return;
}
}
let url = '';
localforage
.getItem('user')
.then((userdata) => {
const user = JSON.parse(userdata);
if (data.data) {
const gcmData = data.data;
url = gcmData.url;
if (gcmData.type === 'note' && !gcmData.notify.split(',').includes(user.name)) {
resolve();
return;
}
}
self.clients
.matchAll({
type: 'window',
includeUncontrolled: true,
})
.then(function (windowClients) {
try {
let isVisible = false;
if (
windowClients.length > 0 &&
windowClients.findIndex((x) => x.url.includes('hello')) > -1
) {
isVisible = true;
} else {
isVisible = false;
}
if (!isVisible) {
const desc = data.notification;
let options = {
data: { url },
};
self.registration
.showNotification(desc['title'], options)
.then(() => {
resolve();
return;
})
.catch((e) => {
resolve();
return;
});
}
} catch (e) {
resolve();
}
})
.catch((e) => {
resolve();
return;
});
})
.catch((e) => {
resolve();
return;
});
} catch (e) {
resolve();
return;
}
})
.catch((e) => {
resolve();
return;
});
});
msg.waitUntil(itsGonnaBeLegendary);
});
self.addEventListener('notificationclick', (event) => {
event.notification.close();
var promise = new Promise(function (resolve) {
if (clients.openWindow && event.notification.data.url) {
clients.matchAll().then(function (clientsArr) {
const client = clientsArr.find(
(c) =>
c.url.includes('custom-url') ||
c.url.includes('custom-url-1')
);
if (client) {
resolve(client.focus());
} else {
resolve(clients.openWindow(event.notification.data.url));
}
});
}
}).then((x) => {
return x;
});
event.waitUntil(promise);
});
})();
The official docs say that SW will be restarted automatically by the browser when the right event occurs for the SW but can't get this to work. Please help.