bug(badge): `set(...)` only works after creating a notification.

[mahen23]

Plugin version:

    "@capawesome/capacitor-badge": "^2.0.2",

Platform(s):

generic #91~18.04.1-Ubuntu SMP Fri Jul 23 13:36:29 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux

Current behavior:

Using Badge.set does not work, but works after creating a notification

Expected behavior:

Badge.set should work fine.

Steps to reproduce:

Badge.clear(); Badge.set({count: 10}); console.log("Badge Count: ", Badge.get()); // count is 0

Related code:

 Badge.clear();
    Badge.set({count: 10});
    console.log("Badge Count: ", Badge.get()); //count is 0

Other information:

Capacitor doctor:

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 4.6.2 @capacitor/core: 4.6.2 @capacitor/android: 4.6.2 @capacitor/ios: 4.6.2

Installed Dependencies:

@capacitor/cli: 4.4.0 @capacitor/ios: 4.4.0 @capacitor/core: 4.4.0 @capacitor/android: 4.4.0

[success] Android looking great! 👌

insert the output from `npx cap doctor` here

[robingenz]

Can you provide a screen recording so that I better understand the problem?

[mahen23]

Can you provide a screen recording so that I better understand the problem?

Here is a screen recording, best i could do with the little time: https://youtu.be/7vF5-MqqW20

Here is my code:

  setBadge() {
    console.log("Setting badge count to: ", this.badgeCount);
    Badge.set({ count: this.badgeCount });
    console.log("Get Badge Count: ", Badge.get());

  }

[robingenz]

You need to await the promise:

 function async setBadge() {
    console.log("Setting badge count to: ", this.badgeCount);
    await Badge.set({ count: this.badgeCount });
    const result = await Badge.get();
    console.log("Get Badge Count: ", result);
}

[felipenunesdev]

I'm facing the same problem in Android.

I've got this reponse from plugin in Chrome console:

{ "callbackId": "57652480", "pluginId": "Badge", "methodName": "set", "options": { "count": 2 } }

But the icon badge is not showing.

[robingenz]

@felipenunesdev The app needs to be installed as PWA.

Edited: I updated the docs.

[felipenunesdev]

@robingenz Thanks for your reply!

Actually I'm using a native app. In IOS it works like a charm, the icon badge shows the correct counter, but in Android the badge is not showing.

[felipenunesdev]

@robingenz the Badge.get() method returns the correct counter value. Other apps I have installed on my phone, shows the icon badge correctly. So I assume that the android launch version is not the problem.

[robingenz]

@felipenunesdev Please have a look at the documentation:

On Android not all launchers support badges. This plugin uses ShortcutBadger. All supported launchers are listed there.

Not all Android launcher are supported. Please have a look at ShortcutBadger and check if your device is supported.

If you have more questions, please create a new issue.

[mahen23]

You need to await the promise:

 function async setBadge() {
    console.log("Setting badge count to: ", this.badgeCount);
    await Badge.set({ count: this.badgeCount });
  const result = await Badge.get();
    console.log("Get Badge Count: ", result);
}

Thanks for the reply, the code works fine, but still the count on the app icon is not getting updated. Only after a notification has been created does the badge count gets applied:

2023-01-23 10:47:10.220 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/ - Line 228 - Msg: undefined 2023-01-23 10:47:10.518 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/ - Line 228 - Msg: undefined 2023-01-23 10:47:11.146 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/8152.js - Line 1 - Msg: Setting badge count to: 3 2023-01-23 10:47:11.206 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/ - Line 228 - Msg: undefined 2023-01-23 10:47:11.228 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/8152.js - Line 1 - Msg: Get Badge Count: {"count":3} 2023-01-23 10:47:13.693 21082-21082 ViewRootIm...nActivity] com.lamaitrise.mon.espace I MSG_WINDOW_FOCUS_CHANGED 0 1 2023-01-23 10:48:12.161 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/8152.js - Line 1 - Msg: After Creating notification 2023-01-23 10:48:12.165 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/8152.js - Line 1 - Msg: Setting badge count to: 3 2023-01-23 10:48:12.273 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/ - Line 228 - Msg: undefined 2023-01-23 10:48:12.288 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/ - Line 228 - Msg: undefined 2023-01-23 10:48:12.311 21082-21082 Capacitor/Console com.lamaitrise.mon.espace I File: http://localhost/8152.js - Line 1 - Msg: Get Badge Count: {"count":3}

[robingenz]

@mahen23 Please provide a Minimal, Reproducible Example (see How to create a Minimal, Reproducible Example) so I can debug the issue.

[mahen23]

badgeBug.tar.gz

@mahen23 Please provide a Minimal, Reproducible Example (see How to create a Minimal, Reproducible Example) so I can debug the issue.

[robingenz]

@mahen23 Can you please publish the example as GitHub repo?

[mahen23]

@mahen23 Can you please publish the example as GitHub repo?

Sorry I do not know how to do that... I can google it and see how its done, but will take me lots of time.

[robingenz]

Just create a normal GitHub repository and push all files:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/mahen23/YOUR-REPO.git
git push -u origin main

[mahen23]

Just create a normal GitHub repository and push all files:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/mahen23/YOUR-REPO.git
git push -u origin main

remote: Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. fatal: Authentication failed for 'https://github.com/mahen23/badgeBug.git/'

[robingenz]

Just create a normal GitHub repository and push all files:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/mahen23/YOUR-REPO.git
git push -u origin main

remote: Support for password authentication was removed on August 13, 2021. remote: Please see docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. fatal: Authentication failed for 'mahen23/badgeBug.git'

See https://stackoverflow.com/a/68781050/6731412

[mahen23]

Just create a normal GitHub repository and push all files:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/mahen23/YOUR-REPO.git
git push -u origin main

remote: Support for password authentication was removed on August 13, 2021. remote: Please see docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. fatal: Authentication failed for 'mahen23/badgeBug.git'

See https://stackoverflow.com/a/68781050/6731412

Thanks for the walkthrough mate, here is my repository: https://github.com/mahen23/badgeBug/blob/main/src/app/home/home.page.ts

[robingenz]

You should only pass integers as count. getRandomArbitrary also returns comma values:

$ Math.random() * (99 - 10) + 10
31.30685279633496 

Besides that, please let me know if this demo works for you: https://capacitor-plugin-demo-robingenz.vercel.app/badge

[mahen23]

You should only pass integers as count. getRandomArbitrary also returns comma values:

$ Math.random() * (99 - 10) + 10
31.30685279633496 

Besides that, please let me know if this demo works for you: https://capacitor-plugin-demo-robingenz.vercel.app/badge

Hello,

It makes not sense to test a demo link since the issue i'm having is when i build an APK. As per your instructions i've created a git repository to as a proof of concept that the app icon badge count is not updating.

I cannot test the demo link you sent me since it will work inside a browser. Since my bug NEEDS REPRODUCTION, you need to compile an APK on your test machine and test the badge update count if it gets updated properly on your phone.

I've made changes to random number generator as per your instructions.

[robingenz]

It makes not sense to test a demo link since the issue i'm having is when i build an APK.

This is the first time you have referred to Android. You have specified generic #91~18.04.1-Ubuntu SMP Fri Jul 23 13:36:29 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux as the platform related to the bug. For this reason, I assumed that the problem occurs in the browser.

I will take another look soon.

[dtarnawsky]

Hey @robingenz, I've created a sample Capacitor app here: https://github.com/dtarnawsky/cs-badge.

The problem appears to be Android specific and requires you to have sent at least one notification to the app for the badge to appear. The sample app has a button to send a local notification to the app in order for the badge to begin showing.

This may be a requirement of Android and it appears that the Cordova plugin cordova-plugin-badge suffers the same issue..

[robingenz]

@dtarnawsky Great, thanks for pointing this out! I found the Android documentation for this: https://developer.android.com/develop/ui/views/notifications/badges The question is whether you can get this to work without showing a notification in the status bar. I'll have to take a closer look.

[robingenz]

I set a bounty of $50 to solve the issue. I am looking for a clean solution, not a workaround. There is no guarantee that a solution exists. Let me know if anyone wants to work on this.

[Eraldo]

In case a notification is needed... How about using a silent (aka data/remote) notification as a trigger to refresh the badge count? 🤷‍♂️

FYI: Just tossing an idea, didn't look at the details (yet). 😊