Ionic 电容器/离子/ Vue本地通知事件侦听器

fnx2tebb  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(208)

我试图让本地通知工作在一个离子Vue应用程序(使用电容器)。
我确实得到了调度通知的工作,但现在我想听点击的通知。
在main.js中,我将本地通知绑定到这个.$本地通知:

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

Vue.prototype.$LocalNotifications = LocalNotifications;

在我的根组件应用程序中,我有:

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

当我在ios仿真器上构建和运行时,我在日志中得到以下输出:

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

当我计划一个通知时,通知确实显示了,但是我认为在添加侦听器时有些事情进行得不太顺利:

INVALID ["options":[]]

有没有人知道如何解决这个问题?或者有没有人有一个在Ionic Vue应用程序中工作通知的代码示例?
此致,
布拉姆

mi7gmzs6

mi7gmzs61#

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

相关问题