How to collapse a Web Push notification sent by FCM - firebase

Question

I'm using FCM with firebase-admin to send a Web Push notification for multiple clients. I want to replace an older message by a new one.
This is how I'm calling it:
return await admin.messaging().sendMulticast({
tokens,
notification: {
title: "Message Title",
body: "Message body.",
},
data: {
type: "ring",
callId,
},
webpush: {
fcmOptions: {
link: process.env.PWA_APP_URL,
},
headers: {
Urgency: "high",
},
},
android: {
collapseKey: "ring",
priority: "high",
ttl: 10,
notification: {
color: "#ff0000",
defaultSound: true,
sound: "default",
lightSettings: {
color: "#ffcc00",
lightOffDurationMillis: 1000,
lightOnDurationMillis: 1000,
},
tag: "ring",
vibrateTimingsMillis: [1000, 1000],
visibility: "public",
priority: "max",
},
},
});
When the message arrives to an Android app client it's collapsed because of android.collapseKey property. But I can't get the same behavior in my web application.
According to the docs, there's a Topic option for Web notifications, but I'm not sure where to put it. I tried to use it as webpush.headers.Topic property but with no success. Messages are not collapsed in Android/Chrome.
What am I doing wrong?

Answer 1

I've followed collimarco's tip and could use showNotification method to collapse a notification.
In firebase-admin/server code I had to remove the notification fields in the message's payload. Now it's just a data message:
return await admin.messaging().sendMulticast({
tokens,
data: {
type: "ring",
callId,
},
});
In the web application I created a background message handler. Now I can call showNotification method when I new message arrives using tag property with renotify=true.
messaging.setBackgroundMessageHandler(function (payload) {
// ...
return self.registration.showNotification("Message Title", {
body: "Message body.",
tag: "ring",
renotify: true,
vibrate: [1000, 1000],
});
});
It would be great to have these properties set on the message payload only.