onMessage() not fired when app is in background (Web javascript).

I building a simple demo chat app with fcm integrated for new message notification. As far as I know, in [fcm doc ](https://firebase.google.com/docs/cloud-messaging/js/receive?authuser=0#handle_messages_when_your_web_app_is_in_the_foreground) regarding `onMessage()`, it said this method get called when:
(1) a message is received while the app has focus
(2) - the user clicks on an app notification created by a service worker `messaging.onBackgroundMessage` handler.

But I'm not sure why `onMessage()` callback is not fired when my app is in background.

### Step 1: Describe your environment

* Operating system: OSX Big Sur
* Browser: All
* Firebase SDK version: 8.9.1

### Step 2: Describe the problem:
`onMessage() `callback is not fired when my app is in background.
#### Steps to reproduce:
1. hide current browser window to make it in background state.
2. send test message.

#### Observed Results:
`onBackgroundMessage() `from sw.js get called fine, but when I clicked on the notification to land on my app window, `onMessage() `did not get triggered (it's only triggered when the current browser window is in foreground state). It did not show any error or warning.

#### Expected Results:
`onMessage() ` should be fired after I clicked the notification to have my app focused.

#### Relevant Code:
this is my index file
```
const messaging = firebase.messaging();

function sendTokenToServer(fcm_token) {
let player_sn = '{{Auth::id()}}';
axios.post('api/save-token', {
fcm_token,
player_sn
})
.then(function(response) {
// console.log(response);
})
.catch(function(error) {
console.log(error);
});
}

messaging.getToken({
vapidKey: '{{config("fcm.VAPID")}}'
}).then((currentToken) => {
// console.log(currentToken)
if (currentToken) {
sendTokenToServer(currentToken)
} else {
// Show permission request UI
console.log('No registration token available. Request permission to generate one.');
// ...
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
// ...
});

messaging.onMessage((payload) => {
console.log('onMessage');
console.log(payload)
});
```
this is my sw.js
```
importScripts('https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.1/firebase.js');
importScripts('https://cdnjs.cloudflare.com/ajax/libs/firebase/8.10.1/firebase-messaging.min.js');

const firebaseConfig = {

apiKey: "AIzaSyBE90OnfKk6MELQ2-Z_DVLYp4maXVzvQO8",

authDomain: "ninja-firestore-tut-nov11.firebaseapp.com",

databaseURL: "https://ninja-firestore-tut-nov11-default-rtdb.asia-southeast1.firebasedatabase.app",

projectId: "ninja-firestore-tut-nov11",

storageBucket: "ninja-firestore-tut-nov11.appspot.com",

messagingSenderId: "28680409583",

appId: "1:28680409583:web:66bef6c94232b88816e61a"

};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
console.log('onBackgroundMessage ', payload);
// Customize notification here
const {title, body} = payload.notification;
const notificationTitle = title;
const notificationOptions = {
body: body,
icon: '/firebase-logo.png'
};
// self.registration.showNotification(notificationTitle,
// notificationOptions);

});
```
Note: I need to comment `self.registration.showNotification(notificationTitle, notificationOptions);` to avoid the notification got duplicate.

Any help on this would be much appreciated...
Thank you.