bug: Push notifications not firing when app is on foreground

[ifigueroap]

Bug Report

Capacitor Version

npx cap doctor output:

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 2.1.0

@capacitor/core: 2.1.0

@capacitor/android: 2.1.0

@capacitor/electron: 2.1.0

@capacitor/ios: 2.1.0

Installed Dependencies:

@capacitor/electron not installed

@capacitor/cli 2.1.0

@capacitor/android 2.1.0

@capacitor/core 2.1.0

@capacitor/ios 2.1.0

[success] Android looking great! 👌 Found 12 Capacitor plugins for ios: cordova-plugin-background-fetch (6.0.6) cordova-plugin-background-mode (0.7.3) cordova-plugin-badge (0.8.8) cordova-plugin-device (2.0.3) cordova-plugin-geolocation (4.0.2) cordova-plugin-local-notification (0.9.0-beta.2) cordova-plugin-uniquedeviceid (1.3.2) cordova-sqlite-storage (5.0.0) cordova-support-google-services (1.4.0) phonegap-plugin-barcodescanner (8.1.0) phonegap-plugin-multidex (1.0.0) phonegap-plugin-push (2.3.0) [success] iOS looking great! 👌

Affected Platform(s)

• [ ] Android
• [x] iOS
• [ ] Electron
• [ ] Web

Current Behavior

I'm implementing a service for pushing notifications to our users, using Django, Django REST Framework, and the django-push-notifications library. I'm following the guide from https://capacitor.ionicframework.com/docs/guides/push-notifications-firebase/ although I'm storing the raw APNS token, rather than the FCM one---hence the push goes directly through APNS.

When the app is in the background and I send a test notification, the banner displays properly. However, when the app is in the foreground, the event handler for 'pushNotificationReceived' is never fired! Likewise, when tapping on the aforementioned banner, the handler for 'pushNotificationActionPerformed' is also never fired.

On the other hand, the code for registration is working OK, I can get the token and use it to register it in my own server.

Here is my code to initialize push notifications

initPushNotifications() {
    console.log('Initializing Push Notifications');

    PushNotifications.addListener('registrationError',
      (error: any) => {
        console.log('Push registration ERROR OK');
        alert('Error on registration: ' + JSON.stringify(error));
      }
    );

    PushNotifications.addListener('pushNotificationReceived',
      (notification: PushNotification) => {
        console.log('Push received OK');
        alert('Push received: ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener('pushNotificationActionPerformed',
      (notification: PushNotificationActionPerformed) => {
        console.log('Push action performed OK');
        alert('Push action performed: ' + JSON.stringify(notification));
      }
    );

    PushNotifications.addListener('registration',
      (token: PushNotificationToken) => {
        console.log('Push registration OK');
        alert('Push registration success, token: ' + token.value);
        const registerDeviceUrl = environment.deviceRegisterUrl;
        this.http.post(registerDeviceUrl, {
          "registration_id": token.value,
          "active": true,
          "cloud_message_type": "FCM",
        }).subscribe(
          _ => {
            console.log("Device registration OK!");
          }, err => {
            console.log("Error registering device " + err);
          }
        )
      }
    );

    // Request permission to use push notifications
    // iOS will prompt user and return if they granted permission or not
    // Android will just grant without prompting
    PushNotifications.requestPermission().then(result => {
      if (result.granted) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // Show some error
      }
    });
  }

Expected Behavior

The test notification should fire the 'pushNotificationReceived' handler. Also, tapping on the banner should fire the 'pushNotificationActionPerformed' handler.

Sample Code or Sample Application Repo

Reproduction Steps

Other Technical Details

npm --version output: 6.14.4

node --version output: v10.15.3

pod --version output (iOS issues only): 1.7.5

Other Information

This seems similar or related to #2401. I also saw #2654, but the solutions there did not work.

[ifigueroap]

I just tested the same codebase on Android, and it works as expected.

[jcesarmobile]

on iOS there can be only one class for handling the notifications, you have 3, the one from cordova-plugin-local-notification , the one from phonegap-plugin-push and the one from capacitor, so one of those cordova plugins is breaking Capacitor

[ifigueroap]

Thank you, I will try again later after removing the dependencies.

Still I'm wondering whether it is possible to combine Capacitor's PushNotifications and LocalNotifications in the same app?

[jcesarmobile]

Capacitor has plugins for both, so yeah, should be possible

[ifigueroap]

Thank you @jcesarmobile, I removed the extra plugins and it works fine now on both Android and iOS!

[paragghadge]

@jcesarmobile @ifigueroap Following is my npx cap doctor output: -- It shows I am not using any other plugin related to push notification. Still it's not working. any suggestions on this?

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 2.4.0 @capacitor/core: 2.4.0 @capacitor/android: 2.4.0 @capacitor/electron: 2.4.0 @capacitor/ios: 2.4.0

Installed Dependencies:

@capacitor/cli 2.4.0 @capacitor/core 2.4.0 @capacitor/ios 2.4.0 @capacitor/android 2.2.0 @capacitor/electron not installed

[success] Android looking great! 👌 Found 27 Capacitor plugins for ios: @ionic-enterprise/auth (1.8.2) call-number (1.0.1) cordova-open-native-settings (1.5.2) cordova-plugin-advanced-http (2.3.1) cordova-plugin-android-permissions (1.0.2) cordova-plugin-app-version (0.1.9) cordova-plugin-appminimize (1.0.1) cordova-plugin-background-fetch (5.6.1) cordova-plugin-background-mode (0.7.3) cordova-plugin-badge (0.8.8) cordova-plugin-battery-status (2.0.3) cordova-plugin-device (2.0.2) cordova-plugin-device-name (1.3.5) cordova-plugin-dialogs (2.0.2) cordova-plugin-file (6.0.2) cordova-plugin-foreground-service (1.1.3) cordova-plugin-geolocation (4.0.2) cordova-plugin-inappbrowser (3.2.0) cordova-plugin-ionic-webview (5.0.0) cordova-plugin-nativegeocoder (3.2.2) cordova-plugin-network-information (2.0.2) cordova-plugin-request-location-accuracy (2.3.0) cordova-plugin-sim (1.3.3) cordova-plugin-uniquedeviceid (1.3.2) cordova-sqlite-storage (4.0.0) cordova.plugins.diagnostic (5.0.2) test-plugin (0.0.1)

[ossmalpha]

I am still having this issue on iOS. Has anyone managed to find a solution?

Running: @capacitor/cli: 2.4.2 @capacitor/core: 2.4.2 @capacitor/ios: 2.4.2

[kiranrayala77]

in android foreground pushNotificationReceived is not called

[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.