如何使用Firebase云消息传递向Nuxt应用发送测试消息？

Question

我正在尝试在Nuxt应用程序上设置FCM。我关注了Firebase's web setup documentation。我在default.vue文件夹内的layouts文件上设置了一种方法，以获取当前的设备令牌。

这是getDeviceToken()文件上的default.vue方法

 mounted() {    
    this.getDeviceToken()
  },
 getDeviceToken() {
      const messaging = firebase.messaging()
      messaging
        .requestPermission()
        .then(() => {
          console.log('Have permission')
          return messaging.getToken()
        })
        .then((currentToken) => {
          if (currentToken) {
            console.log('Current Token : ', currentToken)
          }
        })
        .catch((err) => {
          console.log('Error occured', err)
        })
      messaging.onMessage(function(payload) {
        console.log('onMessage: ', payload)
      })
    }

这是我的firebase-messaging-sw.js文件

importScripts('https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.11.0/firebase-messaging.js')
const firebaseConfig = { 
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxx.firebaseapp.com',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxx.firebaseio.com',
  projectId: 'xxxxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxx.appspot.com',
  messagingSenderId: 'xxxxxxxxxxx',
  appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxe65e18'
}

firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()

完成此设置后，当应用程序在前台运行时，我能够获取设备令牌。但是，当我尝试使用Notification Composer或Postman发送消息时，我已经成功发送了状态，但是在浏览器上没有收到任何通知。我不确定为什么FCM的onMessage方法不起作用。任何帮助将非常感激。谢谢