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

Question

我正在尝试让本地通知在 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-模拟器上构建和运行时，我在日志中得到以下输出：

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

亲切的问候，

布拉姆

Answer 1

总结一下：

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

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

...这将输出“tap”。因为你确实写了 'Notification action received'，我假设你想得到这个动作，所以我在 'notification' 之后添加了 .actionId，它本身会被记录为 [ object 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: 记录“通知样本标题被录音/打开/关闭/responded."，根据给定的动作（但不总是根据语法）。

最后，如果有人刚刚开始使用本地通知，请查看 really nice documentation on what else (a whole lot more!) can be done and also watching this video 可能会给他们一个良好的开端。至少我是这么做的。

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

Capacitor / Ionic / Vue Local Notification eventlistener

vue.js

ionic-framework

event-handling

capacitor

localnotification