问FCM通知在前台和后台接收两次

EN

import "./App.css";
import Fader from "./components/Fader";

import React, {useState} from "react";
import {onMessageListener} from "./firebaseInit";
import Notifications from "./components/Notifications/Notifications";
import ReactNotificationComponent from "./components/Notifications/ReactNotification";
// import { getMessaging, onMessage } from "firebase/messaging";
// import {initializeApp} from "firebase/app";   


function App() {
    const [show, setShow] = useState(false);
    const [notification, setNotification] = useState({title: "", body: ""});    
    

    onMessageListener()
        .then((payload) => {
          setShow(true);
          setNotification({
            title: payload.data.title,
            body: payload.data.body,
          });
          // console.log(payload);
        })
        .catch((err) => console.log("failed: ", err));

  

    return (
        <div className="App">
            {show ? (
                <ReactNotificationComponent
                    title={notification.title}
                    body={notification.body}
                />
            ) : (
                <></>
            )}
            <Notifications/>
            <Fader text="Hello React"></Fader>
        </div>
    );
}

export default App;

import {initializeApp} from 'firebase/app';
import {getMessaging, getToken, onMessage} from "firebase/messaging";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "mykey",
    authDomain: "mykey",
    projectId: "mykey",
    storageBucket: "mykey",
    messagingSenderId: "mykey",
    appId: "mykey",
    measurementId: "mykey"
};

const firebaseApp = initializeApp(firebaseConfig);

const messaging = getMessaging(firebaseApp);

const {REACT_APP_VAPID_KEY} = process.env;
const publicKey = REACT_APP_VAPID_KEY;

export const getTokens = async (setTokenFound) => {
    let currentToken = "";

    try {
        currentToken = await getToken(messaging, {vapidKey: publicKey});
        if (currentToken) {
            setTokenFound(true);
        } else {
            setTokenFound(false);
        }
    } catch (error) {
        console.log("An error occurred while retrieving token. ", error);
    }

    return currentToken;
};

export {
    messaging
};

export const onMessageListener = () =>
    new Promise((resolve) => {
        onMessage(messaging, (payload) => {
            console.log('Message received in foreground. ', payload);
            resolve(payload);
        });
    });

import { initializeApp } from "firebase/app";
import {getMessaging, onMessage} from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();

onBackgroundMessage(messaging, (payload) => {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);

    // Customize notification here
    // const notificationTitle = 'Background Message Title';
    const notificationOptions = {
        body: payload.data.body,
        icon: "/logo192.png",
    };

    return self.registration.showNotification(notificationOptions);

});

{
        "data": {
            "title": "111",
            "body": "test push notif from dev.api hakim foreground"
        },
        "token": "mytoken"
    }