title: FCM Notification Receive Twice in Foreground and Background
body: <p>I have react project and integrate it with FCM SDK 9 like bellow :</p>
  <p>App.js</p>
  <pre><code>import &quot;./App.css&quot;;
  import Fader from &quot;./components/Fader&quot;;
  
  import React, {useState} from &quot;react&quot;;
  import {onMessageListener} from &quot;./firebaseInit&quot;;
  import Notifications from &quot;./components/Notifications/Notifications&quot;;
  import ReactNotificationComponent from &quot;./components/Notifications/ReactNotification&quot;;
  // import { getMessaging, onMessage } from &quot;firebase/messaging&quot;;
  // import {initializeApp} from &quot;firebase/app&quot;;   
  
  
  function App() {
      const [show, setShow] = useState(false);
      const [notification, setNotification] = useState({title: &quot;&quot;, body: &quot;&quot;});    
      
  
      onMessageListener()
          .then((payload) =&gt; {
            setShow(true);
            setNotification({
              title: payload.data.title,
              body: payload.data.body,
            });
            // console.log(payload);
          })
          .catch((err) =&gt; console.log(&quot;failed: &quot;, err));
  
    
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              {show ? (
                  &lt;ReactNotificationComponent
                      title={notification.title}
                      body={notification.body}
                  /&gt;
              ) : (
                  &lt;&gt;&lt;/&gt;
              )}
              &lt;Notifications/&gt;
              &lt;Fader text=&quot;Hello React&quot;&gt;&lt;/Fader&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>firebaseinit (foreground)</p>
  <pre><code>import {initializeApp} from 'firebase/app';
  import {getMessaging, getToken, onMessage} from &quot;firebase/messaging&quot;;
  
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
      apiKey: &quot;mykey&quot;,
      authDomain: &quot;mykey&quot;,
      projectId: &quot;mykey&quot;,
      storageBucket: &quot;mykey&quot;,
      messagingSenderId: &quot;mykey&quot;,
      appId: &quot;mykey&quot;,
      measurementId: &quot;mykey&quot;
  };
  
  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) =&gt; {
      let currentToken = &quot;&quot;;
  
      try {
          currentToken = await getToken(messaging, {vapidKey: publicKey});
          if (currentToken) {
              setTokenFound(true);
          } else {
              setTokenFound(false);
          }
      } catch (error) {
          console.log(&quot;An error occurred while retrieving token. &quot;, error);
      }
  
      return currentToken;
  };
  
  export {
      messaging
  };
  
  export const onMessageListener = () =&gt;
      new Promise((resolve) =&gt; {
          onMessage(messaging, (payload) =&gt; {
              console.log('Message received in foreground. ', payload);
              resolve(payload);
          });
      });
  </code></pre>
  <p>listener background sw</p>
  <pre><code>import { initializeApp } from &quot;firebase/app&quot;;
  import {getMessaging, onMessage} from &quot;firebase/messaging&quot;;
  import { onBackgroundMessage } from &quot;firebase/messaging/sw&quot;;
  
  const messaging = getMessaging();
  
  onBackgroundMessage(messaging, (payload) =&gt; {
      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: &quot;/logo192.png&quot;,
      };
  
      return self.registration.showNotification(notificationOptions);
  
  });
  </code></pre>
  <p>I've change my payload with <strong>data type</strong> and <strong>notification type</strong> but still there's nothing change, notification always pushed twice in background or in foreground. any solution with this?</p>
  <pre><code>{
          &quot;data&quot;: {
              &quot;title&quot;: &quot;111&quot;,
              &quot;body&quot;: &quot;test push notif from dev.api hakim foreground&quot;
          },
          &quot;token&quot;: &quot;mytoken&quot;
      }
  </code></pre>