PWA前台推送通知

Question

我的前台推送通知有问题。

我现在只想在控制台中获取数据，但是没有用。我遵循Firebase文档上的guide，但从未触发此功能...

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
});

背景通知正常工作。

这是我的VueJs文件

import * as firebase from "firebase/app";
import 'firebase/messaging';

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.usePublicVapidKey("");

export default {
  name: 'App',
  mounted() {
    messaging.onMessage((payload) => { // Don't work here
      console.log('Message received. ', payload);
    });

    this.getMsgPushToken();
  },
  methods: {
    ...mapMutations('auth', ['mutMsgPushToken']),

    getMsgPushToken() {
      let that = this
      messaging.requestPermission().then(async function() {
        messaging.getToken().then((token) => {
          that.mutMsgPushToken(token); // Where i get the FCM token
        })
      }).catch((err) => {
        console.log('Unable to get permission to notify.', err);
      });
    },
  },
};

还有我的服务人员

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': ''
});

const messaging = firebase.messaging();

如果您对我所缺少的东西有任何了解，我很想听到它哈哈