setbackgroundmessagehandler does not show the message in chrome

Question

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

firebase.initializeApp({
apiKey: "xxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxx",
databaseURL: "https://xxxxxxxxxxxx",
projectId: "xxxxxxxxxxxx",
storageBucket: "",
messagingSenderId: "xxxxxxxxxxxx",
appId: "xxxxxxxxxxxx"
})

/*
Retrieve an instance of Firebase Messaging so that it can handle background messages.
*/
const messaging = firebase.messaging()
messaging.setBackgroundMessageHandler(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
const notification = JSON.parse(payload.data.notification);
// Customize notification here
const notificationTitle = notification.title;
const notificationOptions = {
body: notification.body,
icon: notification.icon
};

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

Payload:

{
"data":{
"notification": {
"title": "Firebase",
"body": "test",
"click_action": "http://xxxxx",
"icon": "icon.png"
}}
,
"to": "/topics/all"
}

performing debugger, the payload data arrives at the setBackgroundMessageHandler method, when arriving at the self.registration.showNotification does not show the popup message window, and the console does not mark error, chrome desktop Versión 77.0.3865.90 (Build oficial) (64 bits) In mozilla if it shows the popup message

what could be happening?

Can Google Tag Manager be placed to capture the pop-up window clicks? for background process

regards

Unknown Unknown · Accepted Answer · 2019-09-25T07:27:44

did you try initialising the messaging service like this?

// init FCM 
const initFCM = async messaging => {
  try {
    const permission = await Notification.requestPermission()
    permission === 'granted' ? console.log(messaging) : console.log('Failed!')
    // console.log("Successful")
  } catch (error) {
    console.log('Error', error)
  }
}

//use on load
document.addEventListener('DOMContentLoaded', () => {
  const messaging = firebase.messaging()
  messaging.usePublicVapidKey('GET_THIS_FROM_FIREBASE_CONSOLE')
  initFCM(messaging)
})

Always see: messaging.onMessage() and messaging.onTokenRefresh()

https://firebase.google.com/docs/cloud-messaging/js/client

setbackgroundmessagehandler does not show the message in chrome

1 Answers