I have successfully sent and recieved push notifications using the following code.

server code

const admin = require('firebase-admin');
const message1 = {
   token: '<Token>',
   data: {
      title: "Test",
      body: "Test",
   },
   webpush: {
      fcmOptions: {
         link: '/',
      }
   }
};
const messages = [message1];

try {
   const result = await admin.messaging().sendEach(messages);
   console.log(result?.responses);
} catch (error) {
   console.log(error);
}

Service Worker Code

importScripts('.13.2/firebase-app-compat.js');
importScripts('.13.2/firebase-messaging-compat.js');

const firebaseApp = firebase.initializeApp({
    <AUTHORISATION DATA>
});

const messaging = firebase.messaging();

messaging.onMessage((payload) => {
    console.log('Foreground Message recieved', payload);
});

messaging.onBackgroundMessage((payload) => {
    console.log('Background Message recieved', payload);

    const notificationTitle = payload.data.title;
    const notificationOptions = {
        body: payload.data.body,
        icon: '/images/icons-192.png',
        data: {
            url: "/"
        }
    }
    self.registration.showNotification(notificationTitle, notificationOptions);
});

self.addEventListener('notificationclick', function (event) {
    event.notification.close();

    event.waitUntil(
        clients.matchAll({
            type: "window"
        })
            .then(function (clientList) {
                for (var i = 0; i < clientList.length; i++) {
                    var client = clientList[i];
                    if (client.url == '/' && 'focus' in client)
                        return client.focus();
                }
                if (clients.openWindow) {
                    return clients.openWindow('/');
                }
            })
    );
});

What i have yet to figure out is the next steps.

1. Group messages so users are not flooded
2. Dismiss messages when the app is opened

Group messages so users are not flooded

For this my research has uncovered that it is somthing to do with the collapse_key tag. Though the documentation does not give an example and nothing ive found works (I assume because they are for the previous version of FCM).

From what i can tell this collapse key is meant to group messages using the same key so instead of recieving seperate push messages you have one push message saying that you have recieved X messages. Which is the behaviour that i want.

Dismiss messages when the app is opened

Im guessing that to achieve this i need to send a push notification from the app when it opens that when processed by the service worker dismisses all current messages. I have yet to find any information on how to do this.

Conclusion

Im sure that these features would be things that people would like to commonly do. Does anyone know where to look to find information on these two processes?

I have successfully sent and recieved push notifications using the following code.

server code

const admin = require('firebase-admin');
const message1 = {
   token: '<Token>',
   data: {
      title: "Test",
      body: "Test",
   },
   webpush: {
      fcmOptions: {
         link: '/',
      }
   }
};
const messages = [message1];

try {
   const result = await admin.messaging().sendEach(messages);
   console.log(result?.responses);
} catch (error) {
   console.log(error);
}

Service Worker Code

importScripts('https://www.gstatic/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic/firebasejs/10.13.2/firebase-messaging-compat.js');

const firebaseApp = firebase.initializeApp({
    <AUTHORISATION DATA>
});

const messaging = firebase.messaging();

messaging.onMessage((payload) => {
    console.log('Foreground Message recieved', payload);
});

messaging.onBackgroundMessage((payload) => {
    console.log('Background Message recieved', payload);

    const notificationTitle = payload.data.title;
    const notificationOptions = {
        body: payload.data.body,
        icon: '/images/icons-192.png',
        data: {
            url: "/"
        }
    }
    self.registration.showNotification(notificationTitle, notificationOptions);
});

self.addEventListener('notificationclick', function (event) {
    event.notification.close();

    event.waitUntil(
        clients.matchAll({
            type: "window"
        })
            .then(function (clientList) {
                for (var i = 0; i < clientList.length; i++) {
                    var client = clientList[i];
                    if (client.url == '/' && 'focus' in client)
                        return client.focus();
                }
                if (clients.openWindow) {
                    return clients.openWindow('/');
                }
            })
    );
});

What i have yet to figure out is the next steps.

1. Group messages so users are not flooded
2. Dismiss messages when the app is opened

Group messages so users are not flooded

For this my research has uncovered that it is somthing to do with the collapse_key tag. Though the documentation does not give an example and nothing ive found works (I assume because they are for the previous version of FCM).

https://firebase.google/docs/cloud-messaging/concept-options#delivery-options

From what i can tell this collapse key is meant to group messages using the same key so instead of recieving seperate push messages you have one push message saying that you have recieved X messages. Which is the behaviour that i want.

Dismiss messages when the app is opened

Im guessing that to achieve this i need to send a push notification from the app when it opens that when processed by the service worker dismisses all current messages. I have yet to find any information on how to do this.

Conclusion

Im sure that these features would be things that people would like to commonly do. Does anyone know where to look to find information on these two processes?

• javascript
• firebase
• firebase-cloud-messaging
• service-worker

• 1) You should try tag + renotify for web push grouping 2) Use postMessage() from your app to the service worker to close all notifications when the app opens. – shruti Commented Mar 21 at 6:40
• Tag + Renotify worked like a charm. Thanks so mcuh @shruti. Do you have an example of using postMessage() to close a notification. looked at the documentation and it seems to be a way of sending messages not closing them. – Alexander Mason Commented Mar 22 at 1:44
• Great!. for posrMessage() you can send a postmessage with a message close notification when the user opens the app and in a service worker, you can use notification.close when you receive that notification. – shruti Commented Mar 24 at 5:03

1 Answer 1

Group messages so users are not flooded

Thanks to Shruti for pointing this out. Adding tag and renotify to the notification options in the service worker replaces push notifications rather than sending a new one.

Dismiss messages when the app is opened

Digging around i finaly found the code to list notifications (slef.registration.getNotifications()) and to close a notification (notification.close()). both done in the service worker.

Service Worker Code

messaging.onMessage((payload) => {
    console.log('Foreground Message recieved', payload);

    if (payload.data.type === 'clear') {
        self.registration.getNotifications()
            .then(notifications => {
                notifications.forEach(notification => notification.close());
            });
    }
});

messaging.onBackgroundMessage((payload) => {
    console.log('Background Message recieved', payload);

    if (payload.data.type === 'clear') {
        self.registration.getNotifications()
            .then(notifications => {
                notifications.forEach(notification => notification.close());
            });
    } else {
        const notificationTitle = payload.data.title;
        const notificationOptions = {
            body: payload.data.body,
            tag: '<TAG>',
            renotify: true,
            icon: '/images/icons-192.png',
            data: {
                url: "/"
            }
        }
        self.registration.showNotification(notificationTitle, notificationOptions);
    }
});