Как отправить тестовое сообщение в приложение Nuxt с помощью облачных сообщений Firebase?

Question

Я пытаюсь настроить FCM в своем приложении Nuxt. Я следовал за документацией веб-настройки Firebase . Я установил метод для файла 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()

После этой настройки я удалось получить маркер устройства, когда приложение работает на переднем плане. Но когда я попытался отправить сообщение, используя Уведомление Composer или Почтальон, я получил статус успешного отправления, но не получил никакого уведомления в браузере. Я не уверен, почему метод onMessage FCM не работает. Любая помощь приветствуется. Спасибо