@capacitor/push-notifications
推送通知 API 提供对原生推送通知的访问。
安装
npm install @capacitor/push-notifications@latest-5
npx cap sync
iOS
在 iOS 上,您必须启用推送通知功能。有关如何启用该功能的说明,请参阅设置功能。
启用推送通知功能后,将以下代码添加到您应用的 AppDelegate.swift
中:
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: deviceToken)
}
func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
}
Android
推送通知 API 使用 Firebase Cloud Messaging SDK 来处理通知。请参阅在 Android 上设置 Firebase Cloud Messaging 客户端应用 并按照说明创建 Firebase 项目并注册您的应用程序。无需将 Firebase SDK 添加到您的应用或编辑应用清单 - 推送通知插件已为您提供。唯一需要的是将您 Firebase 项目的 google-services.json
文件添加到应用的模块(应用级)目录中。
Android 13 需要权限检查才能接收推送通知。当目标 SDK 为 33 时,您需要相应地调用 checkPermissions()
和 requestPermissions()
。
变量
此插件将使用以下项目变量(在您应用的 variables.gradle
文件中定义):
firebaseMessagingVersion
:com.google.firebase:firebase-messaging
的版本(默认值:23.1.2
)
推送通知图标
在 Android 上,应将具有适当名称的推送通知图标添加到 AndroidManifest.xml
文件中:
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/push_icon_name" />
如果未指定图标,Android 将使用应用图标,但推送图标应为透明背景上的白色像素。由于应用图标通常不是这样,它将显示一个白色方块或圆圈。因此,建议为推送通知提供单独的图标。
Android Studio 有一个图标生成器,您可以使用它来创建推送通知图标。
推送通知通道
从 Android 8.0(API 级别 26)及更高版本开始,支持并推荐使用通知通道。SDK 将按以下顺序为传入的推送通知派生 channelId
:
- 首先,它将检查传入的通知是否设置了
channelId
。 从 FCM 仪表板或通过其 API 发送推送通知时,可以指定channelId
。 - 然后,它将检查
AndroidManifest.xml
中可能给定的值。 如果您希望创建和使用自己的默认通道,请将default_notification_channel_id
设置为您的通知通道对象的 ID,如下所示;FCM 将在传入消息未显式设置通知通道时使用此值。
<meta-data
android:name="com.google.firebase.messaging.default_notification_channel_id"
android:value="@string/default_notification_channel_id" />
- 最后,它将使用 Firebase SDK 为我们提供的回退
channelId
。 FCM 提供了一个具有基本设置的默认通知通道。此通道将由 Firebase SDK 在接收到第一条推送消息时创建。
警告 使用选项 1 或 2 时,您仍然需要在代码中创建一个通知通道,其 ID 与所选选项中使用的 ID 匹配。您可以使用
createChannel(...)
来实现此目的。如果不这样做,SDK 将回退到选项 3。
应用在前台时推送通知的外观
您可以配置应用在前台时显示推送通知的方式。
属性 | 类型 | 描述 | 自版本 |
---|---|---|---|
presentationOptions | PresentationOption[] | 这是一个可以组合的字符串数组。数组中的可能值有: - badge :更新应用图标上的角标计数(默认值) - sound :设备在接收到推送通知时会响铃/振动 - alert :推送通知以原生对话框形式显示 如果不需要任何选项,可以提供空数组。badge 仅适用于 iOS。 | 1.0.0 |
示例
在 capacitor.config.json
中:
{
"plugins": {
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
}
}
在 capacitor.config.ts
中:
/// <reference types="@capacitor/push-notifications" />
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
PushNotifications: {
presentationOptions: ["badge", "sound", "alert"],
},
},
};
export default config;
静默推送通知 / 仅数据通知
iOS
此插件不支持 iOS 静默推送(远程通知)。我们建议使用原生代码解决方案来处理这些类型的通知,请参阅向您的应用推送后台更新。
Android
此插件支持仅数据通知,但如果应用已被终止,则不会调用 pushNotificationReceived
。要处理这种情况,您需要创建一个扩展 FirebaseMessagingService
的服务,请参阅处理 FCM 消息。
常见问题
在 Android 上,有各种系统和应用状态会影响推送通知的传递:
- 如果设备已进入休眠模式,您的应用可能会受到功能限制。为了增加通知被接收的机会,请考虑使用 FCM 高优先级消息。
- 开发环境和生产环境的行为存在差异。尝试在 Android Studio 启动之外测试您的应用。阅读更多此处。
示例
import { PushNotifications } from '@capacitor/push-notifications';
const addListeners = async () => {
await PushNotifications.addListener('registration', token => {
console.info('注册令牌:', token.value);
});
await PushNotifications.addListener('registrationError', err => {
console.error('注册错误:', err.error);
});
await PushNotifications.addListener('pushNotificationReceived', notification => {
console.log('收到推送通知:', notification);
});
await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
console.log('推送通知操作已执行', notification.actionId, notification.inputValue);
});
}
const registerNotifications = async () => {
let permStatus = await PushNotifications.checkPermissions();
if (permStatus.receive === 'prompt') {
permStatus = await PushNotifications.requestPermissions();
}
if (permStatus.receive !== 'granted') {
throw new Error('用户拒绝权限!');
}
await PushNotifications.register();
}
const getDeliveredNotifications = async () => {
const notificationList = await PushNotifications.getDeliveredNotifications();
console.log('已送达的通知', notificationList);
}
API
register()
unregister()
getDeliveredNotifications()
removeDeliveredNotifications(...)
removeAllDeliveredNotifications()
createChannel(...)
deleteChannel(...)
listChannels()
checkPermissions()
requestPermissions()
addListener('registration', ...)
addListener('registrationError', ...)
addListener('pushNotificationReceived', ...)
addListener('pushNotificationActionPerformed', ...)
removeAllListeners()
- 接口
- 类型别名