Push Notifications click_action called before notification actually clicked

Capacitor
1

How does one use the click_action property of PushNotificationSchema? I need to register that someone clicked or tapped the push notification, but this is being sent before any user action occurs.

Need to have a notification 1.) open the app 2.) send a response back to the server.

2

Happy anniversary! :tada:

You should be using the pushNotificationActionPerformed listener (source).

Example

PushNotifications.addListener(
    'pushNotificationActionPerformed',
    (notification: ActionPerformed) => {
        if (notification.actionId === 'tap') {
            // Do stuff
        }
    }
)
1 Like
3

Thank you for the warm anniversary welcome :slight_smile:

I had been using that listener and it’s not firing, though I have seen it work occasionally in the past. App is in the foreground when I tap or swipe it, nothing happens. Under what conditions should I expect that to work?

    await PushNotifications.addListener(
      'pushNotificationActionPerformed',
      (notification: ActionPerformed) => {
        console.debug(
          'pushNotificationActionPerformed notification: ',
          JSON.stringify(notification)
        );
      }
    );

This is all I see in logcat:

2023-03-24 09:41:45.158 12182-12182 Capacitor/Console       com.securecoop.app                   D  File: http://localhost/main.js - Line 1867 - Msg: notifications.service pushNotificationReceived notification: {"id":"0:1679665306539914%ec6cdc84ec6cdc84","data":{"helpID":"9734","serial":"SecureCoop_E0E2E64C19F4"},"title":"title","body":"msg","click_action":"clicked_notification"}
2023-03-24 09:41:45.160 12182-12182 Capacitor/Plugin        com.securecoop.app                   V  To native (Capacitor plugin): callbackId: 31335684, pluginId: Dialog, methodName: confirm
2023-03-24 09:41:45.160 12182-12182 Capacitor               com.securecoop.app                   V  callback: 31335684, pluginId: Dialog, methodName: confirm, methodData: {"title":"title","message":"msg"}
4

See my comment here from a few days ago.

5

Backgrounding the app causes absolutely no relevant output in logcat. When you say local notification do you mean an AlertController? I’m using Angular.

6

No, the Local Notification plugin.

In v4 of the Push Notification plugin, foreground notifications were added for Android (PR). I developed my app before this was changed so haven’t tested using presentationOptions.

7

But shouldn’t I be seeing something with this code? I added your tap logic.

await PushNotifications.addListener(
  'pushNotificationActionPerformed',
  (notification: ActionPerformed) => {
	console.debug(
	  'pushNotificationActionPerformed notification: ',
	  JSON.stringify(notification)
	);
	if (notification.actionId === 'tap') {
	  console.debug(
		'pushNotificationActionPerformed notification.actionId === tap'
	  );
	}
  }
);
8

A couple of clarifying questions.

  • Are you testing on iOS or Android?
  • Where are you adding the pushNotificationActionPerformed listener? Assuming on app boot?
  • Are you seeing any output from the pushNotificationActionPerformed listener if the app is in the background or closed upon tapping the notification?
  • Are you getting a notification when the app is in the foreground? Are you using presentationOptions?
9
  • Android
  • In a service that starts at boot. I can see the listener is registered:
2023-03-24 11:18:18.959  3494-3494  Capacitor               com.securecoop.app                   V  callback: 63117025, pluginId: PushNotifications, methodName: addListener, methodData: {"eventName":"pushNotificationActionPerformed"}
  • Nothing in the logs.
  • Also nothing when in the foreground. Haven’t yet set up presentationOptions, still trying to get the listener to fire and then I’ll try that.
10

To my surprise, presentationOptions were already configured in capacitor.config.ts, but not yet in capacitor.config.json. Added them, same result.

capacitor.config.json:

{
  "plugins": {
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  }
}

capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  server: { iosScheme: 'ionic' },
  appId: 'com.securecoop.app',
  appName: 'SecureCoop',
  webDir: 'www',
  bundledWebRuntime: false,
  plugins: {
    PushNotifications: {
      presentationOptions: ["badge", "sound", "alert"],
    },
  },
  },
};

export default config;
11

I am not sure, it seems like it would at least show the notification when using presentationOptions per the documentation when the app is in the foreground.

From what I understand, if you aren’t using presentationOptions, then the notification won’t show up when the app is in the foreground. It only triggers pushNotificationReceived when in the foreground.

Here is my code. Like I said, I set this up before Android supported foreground push notifications so I haven’t tested with that yet.

Push notification logic

// Listens for notifications when the app is in the foreground
await PushNotifications.addListener(
    'pushNotificationReceived',
    async (notification: PushNotificationSchema) => {
        if (!(await MyLocalNotifications.hasPermission())) {
            return
        }

        const action = ActionNotificationItem.fromJson(notification.data)

        LocalNotifications.schedule({
            notifications: [
                {
                    id: MyLocalNotifications.generateId(),
                    title: action.title,
                    body: action.body,
                    largeBody: action.body,
                    channelId: 'actions',
                    extra: action,
                },
            ],
        })
    }
)

// Method called when tapping on a notification
await PushNotifications.addListener(
    'pushNotificationActionPerformed',
    (notification: ActionPerformed) => {
        if (notification.actionId === 'tap') {
            this.handleNavigation(
                ActionNotificationItem.fromJson(notification.notification.data)
            )
        }
    }
)

Local notification logic

await LocalNotifications.addListener(
    'localNotificationActionPerformed',
    (notification: ActionPerformed) => {
        if (notification.actionId === 'tap') {
            const notificationType = notification.notification.extra?.type ?? NotificationType.None

            if (notificationType === NotificationType.Action) {
                const action = ActionNotificationItem.fromJson(
                    notification.notification.extra
                )

                MyPushNotifications.handleNavigation(action)
            }
        }
    }
)
2 Likes