我一直致力于将 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
我做错了什么?
最佳答案
我在 StackOverflow 的另一个 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')
关于javascript - Firebase 云消息传递前台通知在 Vue 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61824118/