Capacitor / Ionic / Vue 本地通知事件监听器答案

【问题标题】：Capacitor / Ionic / Vue Local Notification eventlistenerCapacitor / Ionic / Vue 本地通知事件监听器
【发布时间】：2020-12-23 12:12:05
【问题描述】：

我正在尝试让本地通知在 Ionic Vue 应用程序中工作（使用电容器）。

我确实让调度通知工作了，但现在我想听听点击通知。

在 main.js 中，我将 LocalNotifications 绑定到 this.$LocalNotifications：

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-emulator 上构建和运行时，我在日志中得到以下输出：

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 应用程序中工作通知的代码示例吗？

亲切的问候，

布拉姆

【问题讨论】：

你找到解决这个问题的方法了吗？
我最终在 main.js 中使用了这个包： import {LocalNotifications} from '@ionic-native/local-notifications' 并且在 beforeCreate 挂钩中我订阅了点击：LocalNotifications.on('click ').subscribe((x) => {...}
好的，谢谢您的回复！

标签： vue.js ionic-framework event-handling capacitor localnotification

【解决方案1】：

总结一下：

您应该使用localNotificationActionPerformed 而不是localNotificationReceived。后者在显示通知时被调用，而另一个正在侦听对通知执行的操作（如docs 中所述），当然包括单击/点击它。所以你的代码看起来像这样：

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

...这将输出“tap”。由于您确实写了“收到通知操作”，我假设您想获得该操作，所以我在“通知”之后添加了 .actionId，它本身只会被记录为 [object Object] 或对象树。

您还要求提供代码示例，所以它来了：

// 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：既然你的问题是plugins have been placed into their own npm packages，所以需要安装@capacitor/local-notifications 并从那里导入。

2：您应该确保允许通知，如果需要，请求权限。

3：点击是您问题的主题，但您可以定义更多内容。

4：这就是您实际创建和发送通知的方式。

5：记录“通知示例标题已录制/已打开/已关闭/已响应。”，根据到给定的动作（但并不总是根据语法）。

最后，如果有人刚刚进入本地通知，请查看really nice documentation 了解还有什么（更多！）可以做，watching this video 可能会给一个人一个良好的开端。至少我是这样做的。

【讨论】：