Getting additional web notification with content "This site has been updated in the...

I have created a service worker in angular where I have subscribed the background notification but every time a notification is received in the browser an additional notification is also triggered with content This site has been updated in the background. I think additional notification is triggered from chrome browser when it does not receive a call back for the web notification triggered. My service worker looks like

importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-messaging-compat.js");

firebase.initializeApp({
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
appId: APP_ID,
measurementId: MEASUREMENT_ID
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
const notificationTitle = payload.data.title;
const notificationOptions = {
body: payload.data.body,
icon: '/firebase-logo.png'
};

self.registration.showNotification(notificationTitle, notificationOptions);
});



I am triggering the notification from Ruby on rails backend where I am using FCM gem version 2.0 with the body

{
'token': token,
'data': {
payload: {
data: {
notification_id: notification_id,
title: title,
body: description,
image_url: image_url,
}
}.to_json
},
'webpush': {
headers: {
"Urgency": "high",
image: image_url
},
data: {
notification_id: notification_id,
title: title,
body: description,
image_url: image_url
fcm_options: {
link: link
}
}


I have tried to find the point where this notification is generated but so for I came to this conclusion that this notification is instantly triggered.

Continue reading...