React Native SDK
1. 前置条件
Section titled “1. 前置条件”- 在 FlareLane 控制台注册并创建一个项目。
2. 配置认证凭证
Section titled “2. 配置认证凭证”按照以下指南,填写 FlareLane 发送推送通知所需的认证凭证。
3. 安装 SDK
Section titled “3. 安装 SDK”在终端中进入项目根目录,运行以下命令:
$ yarn add @flarelane/react-native-sdk@1.10.04. 支持 Android 13
Section titled “4. 支持 Android 13”为了获得顺畅的推送通知授权体验,请将 compileSdkVersion 设置为至少 33。
android { compileSdkVersion 33 ...
defaultConfig { ... targetSdkVersion 33 }}5. iOS 项目设置
Section titled “5. iOS 项目设置”5-1. 配置 Capabilities
Section titled “5-1. 配置 Capabilities”进入目标的 Signing & Capabilities,点击左上角的 + Capability,选择 Push Notifications 添加。
同时选择 Background Modes,并启用 Remote notifications。

5-2. 设置 Service Extension
Section titled “5-2. 设置 Service Extension”在 iOS 上,您需要创建一个 Notification Service Extension 来附加图片等媒体内容。
在 Xcode 中,进入 File > New > Target,选择 Notification Service Extension。

为 Product Name 填写一个合适的名称。本指南中我们使用 FlareLaneNotificationServiceExtension。

点击 Cancel,以免激活单独的 scheme。

接下来,将您刚创建的 Notification Service Extension Target 的 Minimum Deployments 版本设置为与主应用 target 的版本一致。

5-3. 配置 App Group
Section titled “5-3. 配置 App Group”为了在应用与扩展之间同步数据,您需要配置一个 App Group。
进入目标的 Signing & Capabilities,点击左上角的 + Capability,选择 App Groups 添加。
添加一个名为 group.bundleID.flarelane 的分组**,其中 bundleID 必须与您应用的 Bundle Identifier 一致。**

添加成功后,启用该 App Group。

同样地,在您先前创建的扩展中,添加并启用同名的 App Group。

接下来,关闭 Xcode,打开 ios 目录下的 Podfile,添加以下内容:
// Add the lines below at the bottom of the file.// Set the target name to the Product Name of the extension you entered earlier.target 'FlareLaneNotificationServiceExtension' do pod 'FlareLane', '1.9.3'end运行 pod install 完成 SDK 安装。
5-4. 添加 AppDelegate 方法
Section titled “5-4. 添加 AppDelegate 方法”- 添加
application(:didRegisterForRemoteNotificationsWithDeviceToken:)的处理方法
import FlareLane
class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { // 2 FlareLaneAppDelegate.shared.application(application, didRegisterForRemoteNotificationsWithDeviceToken: deviceToken) }}@import FlareLane;
@implementation AppDelegate- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { // 2 [[FlareLaneAppDelegate shared] application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];}5-5. 添加 UNUserNotificationCenterDelegate 方法
Section titled “5-5. 添加 UNUserNotificationCenterDelegate 方法”- 将 UNUserNotificationCenterDelegate 指派给 AppDelegate
- 添加
userNotificationCenter(:willPresent:withCompletionHandler:)的处理方法 - 添加处理方法
import FlareLane
@mainclass AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // 1 UNUserNotificationCenter.current().delegate = self }}
extension AppDelegate: UNUserNotificationCenterDelegate { // 2 func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) { FlareLaneNotificationCenter.shared.userNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler) } // 3 func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) { FlareLaneNotificationCenter.shared.userNotificationCenter(center, didReceive: response, withCompletionHandler: completionHandler) }}#import <UserNotifications/UserNotifications.h>
@interface AppDelegate : UIResponder <..., UNUserNotificationCenterDelegate>@end
// AppDelegate.m@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ // 1 [[UNUserNotificationCenter currentNotificationCenter] setDelegate: self];}
// 2- (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler{ [[FlareLaneNotificationCenter shared] userNotificationCenter:center willPresentNotification:notification withCompletionHandler:completionHandler];}// 3- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler{ [[FlareLaneNotificationCenter shared] userNotificationCenter:center didReceiveNotificationResponse:response withCompletionHandler:completionHandler];}@end5-6. 添加 UNNotificationServiceExtension 方法
Section titled “5-6. 添加 UNNotificationServiceExtension 方法”- 添加
didReceive(:withContentHandler:)的处理方法 - 添加
serviceExtensionTimeWillExpire()的处理方法
import UserNotificationsimport FlareLane
class NotificationService: UNNotificationServiceExtension { override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) { // 1 // Branch so that only FlareLane's methods run for push notifications sent by FlareLane. if FlareLaneNotificationServiceExtensionHelper.shared.isFlareLaneNotification(request) { FlareLaneNotificationServiceExtensionHelper.shared.didReceive(request, withContentHandler: contentHandler) } else { // ... } }
override func serviceExtensionTimeWillExpire() { // 2 FlareLaneNotificationServiceExtensionHelper.shared.serviceExtensionTimeWillExpire() }}@import FlareLane;
@implementation NotificationService
- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler { // 1 // Branch so that only FlareLane's methods run for push notifications sent by FlareLane. if ([[FlareLaneNotificationServiceExtensionHelper shared] isFlareLaneNotification:request]) { [[FlareLaneNotificationServiceExtensionHelper shared] didReceive:request withContentHandler:contentHandler]; } else { // ... }}
- (void)serviceExtensionTimeWillExpire { // 2 [[FlareLaneNotificationServiceExtensionHelper shared] serviceExtensionTimeWillExpire];}6. 编写初始化代码
Section titled “6. 编写初始化代码”在主 App(例如 App.tsx)中添加以下初始化代码。您可以在控制台的 [项目] 页面找到自己的项目 ID。
import FlareLane from '@flarelane/react-native-sdk';
// To control when the notification permission prompt appears, set the second parameter to false and call .subscribe() at the appropriate time.FlareLane.initialize('PROJECT_ID', true);7. 关联用户 ID
Section titled “7. 关联用户 ID”应用安装后,FlareLane 中创建的设备为“匿名设备”。通过关联您单独管理的唯一用户 ID,即可将 FlareLane 的设备与您自己的用户 ID 进行匹配。
关联用户 ID 有诸多好处。 它能让您区分注册用户与未注册用户,并且可以随时按用户 ID 发送推送通知,因此我们建议在初次接入时就完成这一步。
通常,您会在用户成功注册或登录时,通过 setUserId 函数关联用户 ID。
FlareLane.setUserId("USER_ID");8. 进阶接入指南
Section titled “8. 进阶接入指南”自动 URL 处理
Section titled “自动 URL 处理”- 默认情况下,FlareLane 会在用户点击推送通知时自动处理 https 链接、深度链接等 URL。如果您需要实现自定义的点击处理逻辑,请参阅禁用 URL 自动处理。
展示应用内消息(弹窗)
Section titled “展示应用内消息(弹窗)”- 参阅应用内消息(弹窗),在您希望弹窗出现的位置添加**一行代码(displayInApp)**即可。
Android
Section titled “Android”设置通知颜色
Section titled “设置通知颜色”<resources> <!-- Change the notification color --> <string name="flarelane_notification_accent_color">#BC0000</string></resources>设置通知渠道
Section titled “设置通知渠道”- 参阅 Android:设置通知渠道,配置适合您业务的 Android 通知渠道。
设置通知图标
Section titled “设置通知图标”- 参阅 Android:设置通知图标,设置您的图标素材。
| 指南 |
|---|
| Mobile SDK 参考文档 |
| React Native SDK 版本发布说明 |