Describe your environment

• Operating System version: Mac
• Browser version: Firefox (105.0.1 (64-bit)), Chrome (104.0.5112.101)
• Firebase SDK version: v9.11
• Firebase Product: firebase-js-sdk

Describe the problem

On sending a test notification message from Firebase Console > Cloud Messaging > Compose notification I get two push notifications. The code just has the onBackgroundMessage handler in the service worker. I'm not sure why two notifications are sent by FCM console.

Relevant Code:

This is the onBackgroundMessage handler code:

// Show notification when the app is in the backgound
onBackgroundMessage(messaging, function ({ notification }) {
  if (notification && notification.title) {
    const notificationTitle = notification.title;
    const notificationOptions = {
      body: notification.body,
    };

    return self.registration?.showNotification(
      notificationTitle,
      notificationOptions
    );
  }
});

Steps to reproduce:

1. Clone the repo.
2. Update the firebase config details with your config information in:
   src/firebase.ts

const vapidKey = "your-vapid-key";

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: "",
  };

src/service-worker.ts

const appConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
  vapidKey: "",
};

3. Build and run

npm install
npm run build
serve -s build

4. Open the browser and navigate to http://localhost:3000
5. Click on Get FCM Token button and provide browser permissions to show notifications.
6. Copy the device token from the console logs of the browser
7. Using the device token, send a test notification message from Firebase Console > Cloud Messaging > Compose notification.
8. You will receive two notifications.