Capacitor Push Notifications - pushNotificationReceived event is triggered only when app is in foreground. Not when app is in background

Question

I have an app developed with Ionic 6, Capacitor and Angular. In the Push Notifications implementation, pushNotificationReceived event is trigged only when app is in foreground, on iPhone. I am getting the notification when app is in background or in foreground, but this event is NOT triggered when app is in background. Here is the code sample ...

await PushNotifications.addListener('pushNotificationReceived', async (notification: PushNotificationSchema) => {
      // update the app badge count
      const badgeCount = await this.getDeliveredNotifications();
      if (!badgeCount || badgeCount == 0) Badge.set({ count: 1 });
      else Badge.set({ count: badgeCount });
    });

private getDeliveredNotifications = async () => {
    const notificationList: DeliveredNotifications = await PushNotifications.getDeliveredNotifications();
    console.log('delivered notifications', notificationList);
    return notificationList.notifications.length;
  }

Can anyone help me with this issue? Not sure why the event is NOT triggered when app is in background. Any help is greatly appreciated. Thanks in advance.

Problem seem to be unique and I did not find anything similar happening to anyone.

Ionic Info ...enter image description here

Answer 1

To receive background notifications, you must add the remote notifications background mode to your app in XCode. In the Signing & Capability tab, add the Background Modes capability, then select the Remote notification checkbox (Source).

Also, be sure to include the content_available key in the payload.
From the Firebase documentation:

On Apple platforms, use this field to represent content-available in the APNs payload. When a notification or message is sent and this is set to true, an inactive client app is awoken, and the message is sent through APNs as a silent notification and not through FCM. Note that silent notifications in APNs are not guaranteed to be delivered, and can depend on factors such as the user turning on Low Power Mode, force quitting the app, etc. On Android, data messages wake the app by default. On Chrome, currently not supported.

Answer 2

The pushNotificationReceived listener should be called even when the app is in background, but on Android the notification may not appear if you don't force it to be shown. This can be done using a local notification.

Register notification received listener:

await PushNotifications.addListener(
  'pushNotificationReceived',
  async (notification: PushNotificationSchema) => {

    // If the app is in background, this callback is only called for DATA messages
    const isPushNotification = !!notification.title || !!notification.body;

    // Android: check if this is a push notification
    if (isPushNotification) {
      if (isPlatform('android') {
        sendAndroidForegroundNotification(notification);
      }
      handleNotification(notification);
    }
  }
);

Method to send a local notification when the application is in background:

sendAndroidForegroundNotification(notification: PushNotificationSchema) {
  const at = new Date(Date.now() + 1000); // A second after
  LocalNotifications.schedule({
    notifications: [{
      title: notification.title ?? '',
      body: notification.body ?? '',
      id: at.getMilliseconds(),
      schedule: { at },
      extra: notification,
      channelId: 'pop-notifications'
    }]
  });
}

Method to execute when a notification is received (I am supposing that you can simply increment your counter):

const handleNotification = (notification: PushNotificationSchema) => {
  Badge.set({ count: Badge.get() + 1 });
}