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

[quyle92]

I building a simple demo chat app with fcm integrated for new message notification. As far as I know, in fcm doc 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.

[Vijayakumarktm]

Same problem. I'm getting "this site has been updated in the background"

I'm using Reac.js
"react": "^17.0.2",
"firebase": "9.6.7",

Any one can help?

[safiull]

Facing the same problem.

[altinselimi]

I believe the firebase web documentation is not very clear. In my case the onMessage and onBackgroundMessage were explicitly fired. It was either one or the other.

What I did was, I setup a communication channel between the app and the service worker using the Client API.
Good article here.

[spartan73rmy]

I suspect the issue might be stemming from the Firebase Cloud Messaging (FCM) SDK, which automatically displays notifications when your app is in the background. If, in addition to this, you are manually triggering a notification inside the onBackgroundMessage handler, it would result in duplicate notifications being displayed
I can solve this deleting the notification and only send the data

In the documentation can see this Docs