Badge plugin for capacitor

#1

Im using Ionic React and Capacitor. I have push notifications working which is good, and the badge count reflects any new notifications received by the device. However, I want to clear the App badge when user enters the App. I couldn’t find a Capacitor plugin for this, so tried to use the react native Badge plugin, but when installing:
ionic cordova plugin add cordova-plugin-badge
I get error message:
Cordova is not supported for react projects

Not sure how to fix my problem. I thought capacitor would have this plugin covered as must be a popular request. But im probably missing a trick.

Is there another way to reset the badge. Any ideas would be greatly appreciated.

Cheers

#2

A plugin is not needed for this simple feature. Ionic 4 provides this already. Good luck!

#3

I think the op wants the badge on the app icon, not within the app

At least that is the function of the mentioned plugin

#4

Im referring to the badge on the App icon. It’s independent of the link you provided, just happens to use the same name. Cheers

#5

If you’re using Push API in Capacitor you can just call removeAllDeliveredNotifications https://github.com/ionic-team/capacitor/blob/master/ios/Capacitor/Capacitor/Plugins/PushNotifications.swift#L55-L64

#6

Or use https://github.com/TeamHive/fancy-notifications and the setBadgeCount or clearBadgeCount methods.

#7

Thanks very much, this is what I needed.

#8

If anyone else needs this solution … as @mikeroberts suggested, I simply called
PushNotifications.removeAllDeliveredNotifications();
in the appropriate place within my Ionic React App.

1 Like
#9

hi, are you able to make it working? im getting ‘empty’ FancyNotification after import:

import { Plugins } from '@capacitor/core';
const { FancyNotifications } = Plugins;
#10

@pe1 I stumbled across the same issue but it’s easy to solve.

In order to let capacitor in android know about the plugin, you’ll have to add some code to your apps MainActivity.java.

In the end, your activity should look something like this:

package com.app_id.replaceme;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import com.github.triniwiz.capacitor.notifications.FancyNotifications; // << Part 1

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      add(FancyNotifications.class); // << Part 2
    }});
  }
}
1 Like
#11

hi flipace, i have added these lines to MainActivity.java and now it works fine, its my first capacitor plugin working :slight_smile:
thanks!

#12

Can I ask what documentation you used for push notifications? Was it this? https://capacitor.ionicframework.com/docs/guides/push-notifications-firebase

I ask because it refers to Angular but looks like it could be adapted. Before I head down that road, I’d love to know it’ll work.

If not, can you point me in the right direction? I’m also looking at pure React implementations, but am worried what will happen when I build.

Thanks!

#13

Hi @Arains, yeah thats the documentation I used. Only tried for iOS so far but works fine. The only thing I would recommend additionally if you want to target a specific user device is the following plugin


The reason being, this provides you with the FCM token instead of the APN token returned by Capacitor, which can then be used to send push notifications to a specific device
Hope it helps.
Cheers