Firebase 云消息传递前台通知在 Vue 中不起作用

Posted 2023-02-22

【中文标题】Firebase 云消息传递前台通知在 Vue 中不起作用

【英文标题】：Firebase Cloud Messaging foreground notification not working in Vue

【发布时间】：2020-09-01 13:36:50

【问题描述】：

我一直致力于将 FCM 集成到我的 Vue PWA 应用中。到目前为止，我已经设法让后台通知工作，但是当应用程序在前台不起作用时处理通知。这是我的代码。

src/App.vue

import firebase from './plugins/firebase'

export default 
  // Other stuff here...

  methods: 
    prepareFcm () 
      var messaging = firebase.messaging()
      messaging.usePublicVapidKey(this.$store.state.fcm.vapidKey)
      messaging.getToken().then(async fcmToken => 
        this.$store.commit('fcm/setToken', fcmToken)
        messaging.onMessage(payload => 
          window.alert(payload)
        )
      ).catch(e => 
        this.$store.commit('toast/setError', 'An error occured to push notification.')
      )
    
  ,

  mounted () 
    this.prepareFcm()
  

public/firebase-messaging-sw.js

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

firebase.initializeApp(
  messagingSenderId: '123456789'
)

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function (payload) 
  return self.registration.showNotification(payload)
)

src/plugins/firebase.js

import firebase from '@firebase/app'
import '@firebase/messaging'
// import other firebase stuff...

const firebaseConfig = 
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '123456789',
  appId: '...'


firebase.initializeApp(firebaseConfig)

export default firebase

我做错了什么？

【问题讨论】：

在成功获得 FCM Token 后，您是否尝试将 onMessage 块“messaging.onMessage(payload => window.alert(payload))”移出函数。我觉得这个onMessage函数在拿到FCM之后就不需要放入promise了

我遇到了同样的问题，如果你碰巧解决了请告诉我

【参考方案1】：

我在 *** 的另一个 QA 中找到了解决方案（由于某种原因我再也找不到了）。

事实证明，您必须使用 Firebase API v7.8.0 而不是 5.5.6，就像文档当时所说的那样。所以public/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')

【讨论】：

如果有人能找到该 QA，请随时编辑我的答案以包含该链接。

【参考方案2】：

我遇到了同样的问题。在我的情况下， "package.json" 和 "firebase-messaging-sw.js" importScripts 版本中的 firebase 版本不同。在 "firebase-messaging-sw.js" importScripts 中设置相同版本后 “package.json”，我的问题已解决。

更改前

 **"package.json"**
 
 "firebase": "^8.2.1",
 
  **"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');

改动后

 **"package.json"**

 "firebase": "^8.2.1",

 **"firebase-messaging-sw.js"**

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

【参考方案3】：

就我而言，package.json (8.2.1) 上的版本与实际的 SDK_VERSION (8.0.1) 不同

使用相同版本的更改后的服务人员工作..