push notification - React Firebase success message but no message

Question

After searching long and hard and trying different things: Im unable to get a firebase message (sending through postman/ firebase console

firebase-messaging.sw.js

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

firebase.initializeApp({
  apiKey: 'AIzaSy....',
  authDomain: '....firebaseapp.com',
  projectId: '...-20254',
  storageBucket: '....appspot.com',
  messagingSenderId: '6962....',
  appId: '1:696....:web:7d0a.....',
  measurementId: 'G-Q....',
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    payload
  );

  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png',
  };

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

*** also tried the following as setBackgroundMessageHandler:

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('back ')
  const promiseChain = clients.matchAll({
      type: "window",
      includeUncontrolled: true
    }).then(windowClients => {
      for (let i = 0; i < windowClients.length; i++) {
        const windowClient = windowClients[i];
        windowClient.postMessage(payload);
      }
    }).then(() =>{
      return registration.showNotification("my notification title");
    });
    console.log(promiseChain)
    self.registration.showNotification('title', {body:'body'});
  return promiseChain;
});

push-notification.js

import firebase from 'firebase';
import {sendMessage} from './sendMessage';


firebase.initializeApp({
  apiKey: 'AIzaSy....',
  authDomain: '....firebaseapp.com',
  projectId: '...-20254',
  storageBucket: '....appspot.com',
  messagingSenderId: '6962....',
  appId: '1:696....:web:7d0a.....',
  measurementId: 'G-Q....',
});

const messaging = firebase.messaging();
export const ask = async () => {
    await messaging.requestPermission()
    const token = await messaging.getToken();
    console.log('user token: ', token);
    sendMessage(token); // sending with POST, which works
    return token;
  }

  messaging.onMessage(function (payload) {
  alert('Foreground message fired!');
  console.log(payload);
});

manifest.json

{
  "short_name": "app name",
  "name": "Create React App Sample",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "gcm_sender_id": "69...."
}

App.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./firebase-messaging-sw.js')
    .then(function(registration) {
      console.log('Registration successful, scope is:', registration.scope);
      ask(); // request premission at push-notification.js
    }).catch(function(err) {
      console.log('Service worker registration failed, error:', err);
    });
  }

Console & network: Success object

multicast_id: 4369108....
success: 1
failure: 0
canonical_ids: 0
results: Array(1)
0: {message_id: "0:16099......"}
length: 1
__proto__: Array(0)
__proto__: Object

Any help would be greatly appreciated!

question from:https://stackoverflow.com/questions/65602900/react-firebase-success-message-but-no-message

Answer 1

Waitting for answers