当应用程序在“活动”选项卡上时，未收到FCM通知-NextJs

Question

我正在尝试将FCM集成到我的NextJs应用程序中。我正在从邮递员发送推送通知。当我最小化chrome浏览器时会收到通知，但当它处于活动状态时却不会。

据我所知，当浏览器处于活动状态时，应该触发onMessage事件。但是，当我发送通知时，不会触发我的onMessage。

邮递员请求

 {
        "to" : "xxxxxxxxxxxxxxx", 
       "data": {
            "notification": {
            "title": "Hello",
            "body": "world"
        }  
    }
    }

main.js

import firebase from 'firebase/app';
import React, { useEffect } from 'react';
import { requestFirebaseNotificationPermission, onMessageListener } from './../../firebaseInit'

const Main = () => {

    useEffect(() => {

        requestFirebaseNotificationPermission()
            .then((firebaseToken) => {
                console.log("fcm -->", firebaseToken);
                localStorage.setItem("fcm_token", firebaseToken)
            })
            .catch((err) => {
                console.log("fcm error -->", err)
                return err;
            });

        function getMessage() {
            const messaging = firebase.messaging();
            messaging.onMessage((payload) => {
                console.log('foreground ', payload)
            }
            );
        }
        getMessage();
    })

    return (
        <div>
            ...........
        </div>)
}

export default Main;

firebaseInit.js

import firebase from 'firebase/app';
import 'firebase/messaging';
let messaging = null;
const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxx.firebaseapp.com",
    databaseURL: "https://xxx.firebaseio.com",
    projectId: "xxxx",
    storageBucket: "xxxxxx.appspot.com",
    messagingSenderId: "xxxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxx"
};

if (typeof self !== 'undefined') {
    firebase.initializeApp(firebaseConfig);
    messaging = firebase.messaging();
}

export const requestFirebaseNotificationPermission = () =>
    new Promise((resolve, reject) => {
        messaging
            .requestPermission()
            .then(() => messaging.getToken())
            .then((firebaseToken) => {
                resolve(firebaseToken);
            })
            .catch((err) => {
                reject(err);
            });
    });