Displaying notifications while app is running in Android

[leo-petrucci]

I managed to get Push notifications working as intended on Android, unfortunately these only work when the app is in the background or closed.

I found a couple of sources telling me that I need to handle these within the app like this article and this answer, but I have not been able to get these to work.

Where exactly should I be extending that class to handle notifications while the app is open? What packages do I need to import? Why doesn't the capacitor notification plugin handle these out of the box?

[leo-petrucci]

Still struggling with this, would really appreciate any help!

[AE1NS]

You could show an ion-alert when you are inside the app and receive a push notification, like:

PushNotifications.addListener('pushNotificationReceived', async (notification: PushNotification) => {
    await (
        await this._alertController.create({
            header: notification.title,
            message: notification.body,
            buttons: ['Close']
        })
    ).present();
});

[leo-petrucci]

Thank you for the reply! I tried this but I get a Line 1 - Msg: Uncaught (in promise) TypeError: Cannot read property '_alertController' of undefined error when receiving a notification.

Also wouldn't this just show a modal? Is there really no way to show a system notification inside my app without manually coding it myself?

[AE1NS]

You could use this guide to setup push notifications:
https://capacitorjs.com/docs/apis/push-notifications
https://capacitorjs.com/docs/guides/push-notifications-firebase

And then use my approach with the ionic alert. The variable _alertController is injected in the constructor.

constructor(private _alertController: AlertController) { }

[leo-petrucci]

I've got the Push notifications already setup, but I don't think I can get away with showing an alert rather than a notification :/

[pouriamoosavi]

I've managed to solve my problem by using another plugin called local-notifications: https://capacitorjs.com/docs/apis/local-notifications.

I call the schedule function from pushNotificationReceived listener on PushNotifications to shows a notification even when my app is foreground.

import {
  PushNotificationSchema,
  PushNotifications,
} from '@capacitor/push-notifications';
import { LocalNotifications, ScheduleOptions } from '@capacitor/local-notifications';

// ...

PushNotifications.addListener(
  'pushNotificationReceived',
  async (notification: PushNotificationSchema) => {
    let not: ScheduleOptions = {
      notifications: [{
        id: Date.now(),
        body: notification.body,
        title: notification.title,
        ongoing: false,
      }]
    };
    const result = await LocalNotifications.schedule(not)
    console.log(result)
  }
);

Hope it helps

[pavelety]

I have the same problem only for Android, on iOS native push comes even with opened app, so I had to make a toast for Android:

import {NavController, Platform, ToastController} from '@ionic/angular';
...
if (this.platform.is('android')) {
  PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
      this.toastCtrl.create({
        message: `${notification.title}: ${notification.body}`,
        position: 'top',
        buttons: [{
          icon: 'chevron-forward-outline',
          side: 'start',
          role: 'show',
          handler: () => this.navCtrl.navigateForward(YOUR_URL)
        }, {
          icon: 'close',
          side: 'end',
          role: 'cancel'
        }]
      }).then(toast => toast.present());
    }
  );
}