跳转至正文

富媒体通知 Capacitor 插件

支持 Android 通知渠道、进度布局、操作按钮、定时发送和 iOS 中断级别的本地通知

安装

bun add @capgo/capacitor-rich-notifications bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-rich-notifications
  • pnpm add @capgo/capacitor-rich-notifications
  • yarn add @capgo/capacitor-rich-notifications

指南

如何在 Capacitor 中使用 Rich Notifications

使用 @capgo/capacitor-rich-notifications

支持 Android 通知渠道、进度布局、操作按钮、定时发送以及 iOS 中断级别的本地通知。

安装

bun add @capgo/capacitor-rich-notifications
bunx cap sync

插件暴露的内容

  • checkPermission - 检查本地通知权限状态。
  • requestPermission - 请求本地通知权限。
  • createChannel - 创建 Android 通知渠道。
  • createChannelGroup - 创建 Android 通知渠道组。
  • deleteChannel - 删除 Android 通知渠道。
  • display - 立即显示一条本地通知。
  • schedule - 安排一条稍后显示的本地通知。
  • cancel - 按 ID 取消单条通知。
  • cancelAll - 取消该插件管理的所有通知。
  • getDisplayed - 列出通知栏或通知中心里显示的通知。
  • getPending - 列出尚未显示的定时通知。
  • getInitialNotification - 返回打开应用的那条通知(如果有)。
  • setBadge - 设置 iOS 应用图标的角标数量。
  • registerActions - 注册可复用的操作类别。
  • getPluginVersion - 返回平台实现的版本标识。
  • addListener - 监听点击和关闭事件。

用法示例

requestPermission 以及 display

import { RichNotifications } from '@capgo/capacitor-rich-notifications';

await RichNotifications.requestPermission();

await RichNotifications.createChannel({
  id: 'messages',
  name: 'Messages',
  importance: 'high',
});

await RichNotifications.display({
  title: 'Hello',
  body: 'Tap to open the app',
  channelId: 'messages',
});

schedule

import { RichNotifications } from '@capgo/capacitor-rich-notifications';

await RichNotifications.schedule({
  notification: {
    id: 'reminder-1',
    title: 'Reminder',
    body: 'Your appointment starts soon',
    channelId: 'messages',
  },
  trigger: { type: 'timestamp', timestamp: Date.now() + 60_000 },
});

完整参考

常见问题

Rich Notifications 插件常见问题

如何在 Capacitor 应用中安装 Rich Notifications 插件?

运行 "bun add @capgo/capacitor-rich-notifications"(或 "npm install @capgo/capacitor-rich-notifications"),然后运行 "bunx cap sync",让 iOS 和 Android 项目识别到原生 code。最后在应用的 code 中从 "@capgo/capacitor-rich-notifications" 导入即可。

@capgo/capacitor-rich-notifications 是否支持 React、Vue 和 Angular?

支持。Rich Notifications 是一个 Capacitor 包,因此适用于任何运行在 Capacitor 中的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及纯 JavaScript。

@capgo/capacitor-rich-notifications 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-rich-notifications 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-rich-notifications/,该包也可从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

使用 Rich Notifications 的 code 能否不经过 App Store 审核直接更新?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待应用审核,即可发布 Rich Notifications 的变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo