Capacitor / Ionic / Vue Local Notification eventlistener

Issue

I'm trying to get Local Notifications working in an Ionic Vue app (using capacitor).

I did get scheduling notifications working, but now i want to listen to clicks on the notification.

in main.js I bind LocalNotifications to this.$LocalNotifications:

import { Plugins } from '@capacitor/core';
const { LocalNotifications } = Plugins;

Vue.prototype.$LocalNotifications = LocalNotifications;

in my Root component App I have this:

created() {
console.log('Created!')
document.addEventListener('deviceready', () => {
      console.log('ready');
       this.$LocalNotifications.addListener('localNotificationReceived', (notification) => {
          console.log('Notification action received', notification);
        });
    }, false);
}

When I build and run on the ios-emulator, i get the following output in my log:

APP ACTIVE
To Native Cordova ->  Badge load Badge1248600129 ["options": []]
⚡️  [log] - onscript loading complete
To Native Cordova ->  Device getDeviceInfo Device1248600130 ["options": []]
⚡️  To Native ->  Storage get 90127150
⚡️  TO JS {"value":null}
⚡️  [log] - Created!
To Native Cordova ->  LocalNotification launch LocalNotification1248600131 ["options": []]
To Native Cordova ->  LocalNotification ready INVALID ["options": []]
⚡️  To Native ->  LocalNotifications addListener ⚡️  [log] - ready
90127151
⚡️  WebView loaded
⚡️  To Native ->  App addListener 90127152

When I schedule a Notification, the notification does show up, but I think something doesn't go quite well when i'm adding the listener:

INVALID ["options":[]]

Does anyone have any idea how to solve this? Or does anyone have a code example of working notifications in an Ionic Vue app?

Kind regards,

Bram

Solution

To sum up:

You should use localNotificationActionPerformed instead of localNotificationReceived. The latter is called when notifications are displayed, while the other is listening to actions is performed on a notification (as it's stated in the docs), that of course includes clicking / tapping on it. So your code would look like this:

this.$LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
  console.log('Notification action received', notification.actionId);
});

...which would output "tap". Since you did write 'Notification action received', I assume you wanted to get the action, so I added .actionId after 'notification', which only by itself would be logged as [object Object] or as the object tree.

You also asked for code example, so here it comes:

// 1.
import { LocalNotifications } from '@capacitor/local-notifications';

// 2.
await LocalNotifications.requestPermissions();

// 3.
await LocalNotifications.registerActionTypes({
  types: [
    {
      id: 'your_choice',
      actions: [
        {
          id: 'dismiss',
          title: 'Dismiss',
          destructive: true
        },
        {
          id: 'open',
          title: 'Open app'
        },
        {
          id: 'respond',
          title: 'Respond',
          input: true
        }
      ]
    }
  ]
});

// 4.
LocalNotifications.schedule({
  notifications: [
    {
      id: 1,
      title: 'Sample title',
      body: 'Sample body',
      actionTypeId: 'your_choice'
    }
  ]
});

// 5.
LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
  console.log(`Notification ${notification.notification.title} was ${notification.actionId}ed.`);
});

1: Since your question, plugins have been placed into their own npm packages, so one needs to install @capacitor/local-notifications and import from there.

2: You should make sure that notifications are allowed, ask for permissions if needed.

3: Tapping was your question's topic, but you can define a lot more than that.

4: This is how you actually create & send a notification at once.

5: Logs "Notification Sample title was taped / opened / dismissed / responded.", according to the given action (but not always according to grammar).

Finally, if someone's just getting into local notifications, check out the really nice documentation on what else (a whole lot more!) can be done and also watching this video might give one a head start. At least that's what I did.

Answered By - Szezs