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

Question

我有react项目，并将其与FCM SDK 9集成，如下所示：

App.js

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;

firebaseinit(前景(

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"
}

Answer 1

我刚刚删除了self-registration

messaging.onBackgroundMessage(function(payload) {
console.log( payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body    
}; 
//self.registration.showNotification(notificationTitle, notificationOptions);
});

现在我只有一个