@tencentcloud/react-native-push

0.1.0 • Public • Published

简介

基于腾讯云推送服务(Push),支持 iOS 和 Android 推送,同时适配各大厂商推送。

腾讯云推送服务(Push)提供一站式 App 推送解决方案,助您轻松提升用户留存和互动活跃度,支持与腾讯云即时通信 IM SDK、实时音视频 TRTC SDK、音视频通话 SDK、直播 SDK等音视频终端产品协同集成,在不同场景联合使用,提升业务整体功能体验。

数据可视化,辅助运营策略

支持推送消息全链路问题排查

六地服务部署,严守数据安全

提供了中国、东南亚(新加坡、印尼雅加达)、东北亚(韩国首尔)、欧洲(德国法兰克福)以及北美(美国硅谷)数据存储中心供选择,每个数据中心均支持全球接入。如果您的应用在境外上线且用户主要在境外,您可以根据消息传输需求及合规要求,选择适合您业务的境外数据中心,保障您的数据安全。

快速跑通

步骤1:创建应用

进入 控制台 ,单击创建应用,填写应用名称,选择数据中心,单击确定,完成应用创建。

步骤2:开通推送服务 Push

进入 推送服务 Push,单击立即购买或免费试用 。(每个应用可免费试用一次,有效期7天)

步骤3:创建一个 React Native 项目(已有项目可忽略此步骤)

npx react-native@latest init MyReactNativeApp

步骤4:集成 @tencentcloud/react-native-push

npm install @tencentcloud/react-native-push --save

步骤5:注册推送

复制下面的代码到 App.tsx,并将 SDKAppID 和 appKey 替换为您的应用的信息

import Push from '@tencentcloud/react-native-push';

const SDKAppID = 0; // 您的 SDKAppID
const appKey = ''; // 客户端密钥
if (Push) {
  Push.registerPush(SDKAppID, appKey, (data) => {
        console.log('registerPush ok', data);
        Push.getRegistrationID((registrationID) => {
            console.log('getRegistrationID ok', registrationID);
        });
    }, (errCode, errMsg) => {
        console.error('registerPush failed', errCode, errMsg);
    }
  );
}

步骤6:配置 Native Modules 和相关依赖

For Android:

1)使用 Android Stuido 打开 MyReactNativeApp 目录下的 android 项目。

2)编辑 settings.gradle,在文件末尾添加以下内容并保存。

include ':tencentcloudpush'
project(':tencentcloudpush').projectDir = new File('../node_modules/@tencentcloud/react-native-push/android')

编辑 app/build.gradle 文件,更新 dependencies 配置并保存。

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    // Required
    implementation project(':tencentcloudpush')
    implementation 'com.tencent.timpush:timpush:8.1.6906'
    implementation 'com.tencent.liteav.tuikit:tuicore:latest.release'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

3)以上操作都完成后,选择 File > Sync Project with Gradle Files。

4)如果您的项目入口文件是 MainApplication.kt,请按如下方式修改:

import com.tencent.qcloud.rntimpush.TencentCloudPushApplication
import com.tencent.qcloud.rntimpush.TencentCloudPushPackage

// Replace Application with TencentCloudPushApplication
class MainApplication : TencentCloudPushApplication(), ReactApplication {
  ...
  //  add TencentCloudPushPackage to the list of packages returned in ReactNativeHost's getPackages() method
  override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
        // Packages that cannot be autolinked yet can be added manually here, for example:
        // add(MyReactNativePackage())
        add(TencentCloudPushPackage())
    }
}

5)如果您的项目入口文件是 MainApplication.java,请按如下方式修改:

import com.tencent.qcloud.rntimpush.TencentCloudPushApplication;
import com.tencent.qcloud.rntimpush.TencentCloudPushPackage;

// Replace Application with TencentCloudPushApplication
public class MainApplication extends TencentCloudPushApplication implements ReactApplication {
  ...
  // add TencentCloudPushPackage to the list of packages returned in ReactNativeHost's getPackages() method
  @Override
  protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new TencentCloudPushPackage());
    return packages;
  }
  ...
}

For iOS:

1)使用 XCode 打开 MyReactNativeApp/ios/MyReactNativeApp.xcworkspace,右键点击 Libraries > Add Files to "MyReactNativeApp",将 node_modules/@tencentcloud/react-native-push/ios 目录下的 TencentCloudPush.h 和 TencentCloudPush.mm 添加到工程。

2)编辑 MyReactNativeApp/ios/Podfile,添加依赖。

target 'MyReactNativeApp' do
  # Uncommment the next line if you're using Swift or would like to use dynamic frameworks
  use_frameworks!
  use_modular_headers!
  
  # Pods for Example
  pod 'TXIMSDK_Plus_iOS_XCFramework'
  pod 'TIMPush', '8.1.6907'
end

3)安装 TIMPush 组件。

pod install 
# 如果无法安装最新版本,执行以下命令更新本地的 CocoaPods 仓库列表
pod repo update

4)在App中添加推送权限,请在 Xcode 项目中启用推送通知功能。打开 Xcode 项目,在 Project > Target > Capabilities 页面中点击红框中的加号按钮,然后选择并添加 Push Notifications 。

添加后的结果如图中红框所示。

步骤7:在真机上运行(测试前请务必打开手机通知权限,允许应用通知。)

从项目根目录开始,在命令提示符中运行以下命令,在设备上安装并启动您的应用程序:

For Android:

npm run android

For iOS:

npm run ios

离线推送厂商 Push Channel 配置

For Android:

1)Android 厂商较多,详细配置指引请参考 厂商配置

2)配置完成后,从控制台下载 timpush-configs.json 文件并添加到项目的 android/app/src/main/assets 目录下,如果该目录不存在,请手动创建。

3)根据您的需要,集成对应的厂商,我们以小米手机为例:编辑 app/build.gradle 文件,更新 dependencies 配置并保存。

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    // Required
    implementation project(':tencentcloudpush')
    implementation 'com.tencent.timpush:timpush:8.1.6906'
    implementation 'com.tencent.liteav.tuikit:tuicore:latest.release'
    // For Xiaomi push
    implementation 'com.tencent.timpush:xiaomi:8.1.6906'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

4)选择 File > Sync Project with Gradle Files,然后重新构建 app 安装到手机运行。

For iOS:

1)iOS 详细配置指引请参考 厂商配置

2)在 MyReactNativeApp/ios/MyReactNativeApp 目录下新建 Resources 目录,在 Resources 目录下新建 timpush-configs.json 文件,将您控制台的证书 ID 填入后保存,如下所示:

{
  "businessID": "您的证书 ID"
}

3)使用 XCode 打开 MyReactNativeApp/ios/MyReactNativeApp.xcworkspace,右键点击项目 > Add Files to "MyReactNativeApp",添加上一步创建的 Resources 文件夹到工程,然后重新构建 app 安装到手机运行。

接口

API 描述
registerPush 注册推送服务 (必须在 App 用户同意了隐私政策,并且允许为 App 用户提供推送服务后,再调用该接口使用推送服务)。
首次注册成功后,TencentCloud-Push SDK 生成该设备的标识 - RegistrationID。
业务侧可以把这个 RegistrationID 保存到业务服务器。业务侧根据 RegistrationID 向设备推送消息或者通知。
unRegisterPush 反注册关闭推送服务。
setRegistrationID 设置注册推送服务使用的推送 ID 标识,即 RegistrationID。
如果业务侧期望业务账号 ID 和推送 ID 一致,方便使用,可使用此接口,此时需注意,此接口需在 registerPush(注册推送服务)之前调用。
getRegistrationID 注册推送服务成功后,获取推送 ID 标识,即 RegistrationID。
getNotificationExtInfo 获取推送扩展信息。
registerPush(SDKAppID: number, appKey: string, onSuccess: (data: string) => void, onError?: (errCode: number, errMsg: string) => void);
属性 类型 必填 说明
SDKAppID number 推送(Push)应用 ID
appKey string 推送(Push)应用客户端密钥
onSuccess function 接口调用成功的回调函数
onError function 接口调用失败的回调函数
unRegisterPush(onSuccess: () => void, onError?: (errCode: number, errMsg: string) => void): void;
属性 类型 必填 说明
onSuccess function 接口调用成功的回调函数
onError function 接口调用失败的回调函数
setRegistrationID(registrationID: string,  onSuccess: () => void): void;
属性 类型 必填 说明
registrationID string 设备的推送标识 ID,卸载重装会改变。
onSuccess function 接口调用成功的回调函数
getRegistrationID(onSuccess: (registrationID: string) => void): void;
属性 类型 必填 说明
onSuccess function 接口调用成功的回调函数
getNotificationExtInfo(onSuccess: (extInfo: string) => void): void;
属性 类型 必填 说明
onSuccess function 接口调用成功的回调函数

Package Sidebar

Install

npm i @tencentcloud/react-native-push

Weekly Downloads

430

Version

0.1.0

License

ISC

Unpacked Size

29 kB

Total Files

11

Last publish

Collaborators

  • mango2630
  • allen0809npm
  • rgzhao
  • jasperdai
  • raingxm
  • tencent-im
  • jonytang
  • chenximo
  • jiushu530
  • dawnrking
  • mileszzhang
  • ashster
  • tencent-cloud-im
  • yangq