在接下来的12个FCM实施中，firebase版本9 FCM实现

Question

我想在下一个JS（版本12）应用程序上添加推送通知。因此，在此上实现了Firebase云消息传递。实现看起来像这样：

import { initializeApp, getApp, getApps } from "firebase/app"
import { getMessaging, getToken } from "firebase/messaging"
import { firebaseConfig } from "./config"

const app = !getApps.length ? initializeApp(firebaseConfig) : getApp()

并添加了此 CloudMessaging 功能，以获取FCM令牌。 onMessageListener 函数用于显示前景消息

export const cloudMessaging = async () => {
  const token = await isTokenAvailable()
  if (token !== null) {
    return Promise.resolve({
      status: true,
      token: token,
    })
  }
  try {
    const permission = await Notification.requestPermission()

    const messaging = getMessaging(app)
    console.log(messaging)
    console.log(permission)
    if (permission === "granted") {
      const FCM_TOKEN = await getToken(messaging, {
        vapidKey: process.env.NEXT_PUBLIC_FCM_VAPID_KEY,
      })
      if (FCM_TOKEN) {
        localStorage.setItem("fcm_token_prac", FCM_TOKEN)
        return Promise.resolve({
          status: true,
          token: FCM_TOKEN,
        })
      }
    }
  } catch (err) {
    console.log(err, "cloudmessaging error")
    return Promise.resolve({
      status: false,
    })
  }
}
export const onMessageListener = () => {
  const messaging = getMessaging(app)
  console.log(messaging)

  return new Promise((res) => {
    messaging.onMessage((payload) => {
      res(payload)
    })
  })
}

并从我的布局组件中调用这些功能

useEffect(() => {
    firebaseInit()
    async function firebaseInit() {
      try {
        await cloudMessaging()
      } catch (err) {
        console.log(err)
      }
    }
  }, [])

  useEffect(() => {
    onMessageListener()
      .then((payload) => {
        console.log(payload, "onMessageListener")
      })
      .catch((err) => console.log(err, "onMessageListener useEffect"))
  }, [])

，但在控制台中遇到此错误：

 TypeError: messaging.onMessage is not a function
    at eval (firbase.js?100f:58:15)
    at new Promise (<anonymous>)
    at onMessageListener (firbase.js?100f:57:10)
    at eval (Layout.js?4f8d:33:22)
    at commitHookEffectListMount (react-dom.development.js?ac89:23049:1)

我无法找出我在哪里犯了错误的地方。谁能指导我实施此功能？

Answer 1

我认为您可以尝试在导入部分中添加onMessage。

import { getMessaging, getToken, onMessage } from "firebase/messaging"

删除消息传递在线

messaging.onMessage

变为

onMessage((payload) => {
    res(payload)
})

SDK版本9