navigator.setAppBadge does not work within onBackgroundMessage

[atgillette]

Operating System

macOS 14.4.1 and iOS 17.5.1

Browser Version

Chrome (macOS) and Safari PWA (iOS)

Firebase SDK Version

10.4.0

Firebase SDK Product:

Messaging

Describe your project's tooling

Reace - CRA

Describe the problem

within messaging.onBackgroundMessage, I'm unable to get navigator.setAppBadge to work in my service worker file.

But if I use navigator.setAppBadge when service worker initiates, it works as expected.

Steps and code to reproduce issue

messaging.onBackgroundMessage((payload) => {
  
  ++badgeCounter;

  console.log("badgeCounter", badgeCounter);

  navigator.setAppBadge(badgeCounter); 
}

[hsubox76]

I'm not an expert on notifications but I did a little research and it seems like there may be some issues with updating the badge notification from the background on macOS:

https://stackoverflow.com/questions/78472771/macos-setappbadge-not-called-by-service-worker-if-pwa-installed-web-app-is-c

I did some testing on my machine (macOS, Chrome) and it seems like there's some odd behavior of setAppBadge in the service worker. You said that if you set it at the top of the service worker code (outside of onBackgroundMessage), it worked, and I found that too. But if I immediately then set it to a different number after that, still in the top level of the service worker, it didn't update to the new number.

// This sets it permanently to 48 and never updates to 47
navigator
  .setAppBadge(48)
  .then(() => navigator.setAppBadge(47))
  .then(() => {
    console.log("set badge twice");
  });

I don't think this is a bug with the Firebase Messaging SDK but some kind of bug or at least unexpected behavior with setAppBadge and PWAs, maybe on a certain OS or browser. Can you let me know if you can get it to update to one number and then a second number in the service worker, even if not using onBackgroundMessage, and the code to do it? Maybe there's just a problem with my setup.

I was able to get setAppBadge to update just fine in onMessage, in the main app code (not in the service worker).

[google-oss-bot]

Hey @atgillette. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[atgillette]

Hi,

I had to stop messaging.onBackgroundMessage because of this issue where in iOS onBackgroundMessage doesn't work https://github.com/firebase/firebase-js-sdk/issues/7309

[dlarocque]

Hi,

I had to stop messaging.onBackgroundMessage because of this issue where in iOS onBackgroundMessage doesn't work https://github.com/firebase/firebase-js-sdk/issues/7309

Is this issue caused by the issue you linked?

[google-oss-bot]

Hey @atgillette. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[atgillette]

navigator
.setAppBadge(48)
.then(() => navigator.setAppBadge(47))
.then(() => {
console.log("set badge twice");
});

This code worked for me.

[atgillette]

Hey @atgillette. We need more information to resolve this issue but there hasn't been an update in 5 weekdays

What specific information do you need from me?

The simple code below should set the badge to 50. But it doesn't. Outside of this handler, the navigator.setAppBadge works.

messaging.onBackgroundMessage((payload) => {
  navigator.setAppBadge(50);
})

[DellaBitta]

In our testing it seems that something in the state of your service worker breaks the setAppBadge method in the browser implementations on macOS. In our simple testing with the Firebase SDK the method works, even in onBackgroundMessage.

We need to understand more about what your service worker might be doing before the messaging event is fired so that we can reproduce the problem here.

Additionally, given the link that @hsubox76 provided above, this issue might not be Firebase related but an issue with the browser implementation itself:

it seems like there may be some issues with updating the badge notification from the background on macOS: https://stackoverflow.com/questions/78472771/macos-setappbadge-not-called-by-service-worker-if-pwa-installed-web-app-is-c