Web firebase.messaging (). OnMessage не сработал, но фоновое уведомление прекрасно сработало

Question

Я хочу перезагрузить или вызвать какое-либо событие в foregrounf, если push-сообщение отправлено с firebase.messaging (). OnMessage, но оно не сработало. Я использую firebase.mesaging.sw.js с фоновым уведомлением, и он работает правильно, что не так с моим кодом?

firebase.js

const config = {
  apiKey: "x",
  projectId: "x",
  storageBucket: "x",
  messagingSenderId: "x"
};

firebase.initializeApp(config);

const msg = firebase.messaging()
msg.requestPermission()
  .then(() => {
    return msg.getToken()
  })
  .then((token) => {
  })
  .catch((err) => {
  })

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

firebase.messaging.sw.js

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

const config = {
  apiKey: "x",
  projectId: "x",
  storageBucket: 'x',
  messagingSenderId: "x"
};

firebase.initializeApp(config);
const msg = firebase.messaging()

msg.setBackgroundMessageHandler(function(payload) {
  let options = {
    body: payload.data.body,
    icon: payload.data.icon
  }

  return self.registration.showNotification(payload.data.title, options);

});

Я не знаю, что не так с моим кодом

Answer 1

Вам не хватает многих вещей, и onMessage будет работать, только если firebase инициализируется перед вызовом. Пожалуйста, следуйте этому. Я сделал это так, и это работает.

инициализирует Firebase и получает токен

export class BrowserFcmProvider {
export const FIREBASE_CONFIG = {
 apiKey: "****",
 authDomain: "****",
 databaseURL: "****",
 projectId: "****",
 storageBucket: "****",
 messagingSenderId: "****",
 appId: "****"
}

firebase.initializeApp(FIREBASE_CONFIG);

async webGetToken() {
 try {
   const messaging = firebase.messaging();
   await messaging.requestPermission();
   const token = await messaging.getToken();
   let uuidTemp = new DeviceUUID().get();
   return this.saveTokenToFireStoreFromWeb(token, uuidTemp)

 } catch (e) {
   console.log(e);
 }
}

saveTokenToFireStoreFromWeb(token, uuid) {
  try {
     const docData = {
     token: token,
     device_type: 'web',
     uuid: uuid
     }
    const devicesRef = this.db.collection('devices')
    return devicesRef.doc(uuid).set(docData);
  } catch (e) {
    console.log(e, 'saveTokenError');
  }
}

showMessage() {
  try {
    const messaging = firebase.messaging();
    messaging.onMessage((payload) => {
    console.log(payload);
    })
  } catch (e) {
    console.log(e)
  }
}
}

И вызывает метод, пока приложение загружается следующим образом

  async configureFirebaseForBrowser(res) {
      await this.bfcm.webGetToken();
      this.bfcm.showMessage();
  }

Функция Firebase и тип полезной нагрузки

    const payloadWeb = {
            title: title,
            body: body,
            data: {
                title: title,
                body: body
            },
            tokens: uniqueDevicesTokenArrayWeb,
        }

  const responseWeb = await admin.messaging().sendMulticast(payloadWeb);
  console.log(responseWeb.successCount + ' notifications has been sent to Web successfully');

Я использовал асинхронный режим и ожидание, поскольку нам нужно асинхронно управлять операциями firebase / firestore.

fcm не работает в режиме инкогнито и браузере safari