feat: Support for foreground "Pop on screen"/notification banner on Android

Feature Request

Describe the Feature Request

Android has a feature called “Pop on screen” which allows an app to show a banner with a notification. This is especially handy when the app is open (foreground) and you want to trigger a Local Notification. However, in the Push Notification implementation of Capacitor, this is not supported (there is support for iOS). Please add support for Android’s “Pop on screen” feature as well.

Platform Support Requested

• Android
• iOS
• Electron
• Web

Describe Preferred Solution

Ideally, the existing presentationOptions of Capacitor’s Push Notifications config should also be respected by the Android version.

Describe Alternatives

We tried https://github.com/katzer/cordova-plugin-local-notifications, but it suffers from the same issue.

Related Code

Additional Context

[jcarignan]

Sorry for the late reply. I think the Ionic Team should add a note in their docs: PushNotifications received when the app is in the foreground don’t appear at all on Android.

Atleast you get the callback to send a LocalNotification instead, exactly how @Simbaclaws suggested.

@mccs0064 Here is my relevant code:

// There are 2 types of Firebase messages
// PUSH - containing atleast a title or a body, designed for user notifications
// DATA - NOT containing a title or body, designed for application updates

// When the app is in the background, this callback is only called for DATA messages

PushNotifications.addListener('pushNotificationReceived', notification => {    

    const isPushNotification = !!notification.title || !!notification.body;

    // if this is a push notification received when the app is in the foreground on Android
    if (isAndroid && isPushNotification) {

        // We schedule a LocalNotification 1 second later since Capacitor for Android doesn't show anything in this case
        LocalNotifications.schedule({
            notifications: [{
                title: notification.title,
                body: notification.body,
                id: new Date().getUTCMilliseconds(),
                schedule: {
                    at: new Date(Date.now() + 1000)
                },
                extra: notification.data,
                channelId: 'pop-notifications'
            }]
        });
    }
});

[jcarignan]

if (isPlatform('android') {
    const notificationChannel: NotificationChannel = {
        id: 'pop-notifications',// id must match android/app/src/main/res/values/strings.xml's default_notification_channel_id
        name: 'Pop notifications',
        description: 'Pop notifications',                
        importance: 5,
        visibility: 1
    };

    PushNotifications.createChannel(notificationChannel);
    LocalNotifications.createChannel(notificationChannel);
}