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

[dennisameling]

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

• [x] 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

[andysousa]

yes! This is much needed. Please respect the heads up banner on push notifications in the foreground.

[andysousa]

Just figured out you can set the Importance of that channel to max in the plugin code, but this is obviously less than ideal because you are modifying the plugin. Could hold you over until the plugin allows you to pass it.

This is in LocalNotificationManager.java

[jcesarmobile]

Issues tagged with feature request are closed but tracked for reactions to gauge interest.

Or if you are really interested and have the knowledge to implement this, you can send a PR.

[jcarignan]

Since the latest capacitor 2.0.0 release, we can finally remove our patch of setting the IMPORTANCE_MAX in node_modules as @andysousa pointed out (Thanks a lot btw!). We can now create our own channels for LocalNotifications, so this issue is finally resolved.

[Simbaclaws]

What is the current state of this feature request? Has this been implemented yet?

I haven't seen any sort of foreground notification come up in android on capacitor version 2.1 yet. When using Push Notifications with the corresponding presentationOptions.

Otherwise, what are the steps to produce the same result? For example with LocalNotifications?

[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);
}

[Simbaclaws]

Thank you @jcarignan would I still need to send a local notification on:

PushNotifications.addListener('pushNotificationReceived',
      (notification: PushNotification) => {
        // send local notification for android here?
      }
    );

Or is creating a channel for local and push notifications enough for the pop on screen notifications?

[mccs0064]

@jcarignan can you show your full code sample with this working. I am creating a channel for my pushNotifications but they are still not popping up on screen.

[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'
            }]
        });
    }
});

[jpmc3630]

@jcarignan thanks this is working great on Android 9 device. I understand notification channels are only for Android 8+, but is there any way to get 'heads up' local notifications on Android 7 ? (i'm trying to support it)

[ericgopak]

Thanks! The proposed workaround works for me. Although, perhaps it may be improved a bit to display the same notification icon that would appear in Push notifications?

In my use case, I need to always display Push notifications and listen to pushNotificationActionPerformed events. With this workaround one would also need to listen to localNotificationActionPerformed on LocalNotifications plugin.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.