react-native 信鸽推送集成

目录

• 一. git链接: react-native-xinge-push
  • 1.1 安装
  • 1.2. link
• 二. android配置
  • 2.1. android/settings.gradle
  • 2.2. android/app/build.gradle
  • 2.3. android/app/src/main/java/com/nativeboilerplate/MainApplication.java
  • 2.4. android/app/src/main/AndroidManifest.xml
• 三. ios配置
  • 3.1 ios/项目名.xcodeproj/project.pbxproj
  • 3.2 ios/项目名/AppDelegate.m
  • 3.3 修改ios capabilities
    • 3.3.1 remote nitifications
    • 3.3.2 push notifications
  • 3.4 ios证书(开发/生产)
• 四. index.js中配置
• 注

一. git链接: react-native-xinge-push

1.1 安装

npm install --save react-native-xinge-push

1.2. link

react-native link react-native-xinge-push

二. android配置

2.1. android/settings.gradle

include ':react-native-xinge-push'
project(':react-native-xinge-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-xinge-push/android')

2.2. android/app/build.gradle

defaultConfig: {
  ...
  manifestPlaceholders = [
    XG_ACCESS_ID: "xxx", // 此处需要替换
    XG_ACCESS_KEY: "xxx", // 此处需要替换
    HW_APPID: "",
    PACKAGE_NAME: "xxx" // 此处需要替换
  ]

}

...

dependencies {
  ...
  compile project(':react-native-xinge-push')
  ...
}

2.3. android/app/src/main/java/com/nativeboilerplate/MainApplication.java

import com.jeepeng.react.xgpush.PushPackage;

...
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        ...
        new PushPackage(),
        ...
      );
    }
...

2.4. android/app/src/main/AndroidManifest.xml

<application
  ...>

  ...

  <receiver android:name="com.jeepeng.react.xgpush.receiver.MessageReceiver"
    android:exported="true" >
    <intent-filter>
        <!-- 接收消息透传 -->
        <action android:name="com.tencent.android.tpush.action.PUSH_MESSAGE" />
        <!-- 监听注册、反注册、设置/删除标签、通知被点击等处理结果 -->
        <action android:name="com.tencent.android.tpush.action.FEEDBACK" />
    </intent-filter>
  </receiver>

  ...
</application>

三. ios配置

3.1 ios/项目名.xcodeproj/project.pbxproj

参考: example/ios/example.xcodeproj/project.pbxproj

3.2 ios/项目名/AppDelegate.m

#import <XGPush/XGPushManager.h>
#import <XGPush.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[XGPush defaultManager] reportXGNotificationInfo:launchOptions];
  return YES;
}
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
  [XGPushManager didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    [XGPushManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
	NSLog(@"[XGPush] register APNS fail.\n[XGPush] reason : %@", error);
  [XGPushManager didFailToRegisterForRemoteNotificationsWithError:error];
}

// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
  [XGPushManager didReceiveLocalNotification:notification];
}

/**
 收到通知消息的回调，通常此消息意味着有新数据可以读取（iOS 7.0+）

 @param application  UIApplication 实例
 @param userInfo 推送时指定的参数
 @param completionHandler 完成回调
 */
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
  NSLog(@"[XGPush] receive slient Notification");
  NSLog(@"[XGPush] userinfo %@", userInfo);
  UIApplicationState state = [application applicationState];
  BOOL isClicked = (state != UIApplicationStateActive);
  NSMutableDictionary *remoteNotification = [NSMutableDictionary dictionaryWithDictionary:userInfo];
  if(isClicked) {
    remoteNotification[@"clicked"] = @YES;
    remoteNotification[@"background"] = @YES;
  }
  [[XGPush defaultManager] reportXGNotificationInfo:remoteNotification];
  [XGPushManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

// iOS 10 新增 API
// iOS 10 会走新 API, iOS 10 以前会走到老 API
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_10_0
// App 用户点击通知
// App 用户选择通知中的行为
// App 用户在通知中心清除消息
// 无论本地推送还是远程推送都会走这个回调
- (void)xgPushUserNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {
	NSLog(@"[XGPush] click notification");
	if ([response.actionIdentifier isEqualToString:@"xgaction001"]) {
		NSLog(@"click from Action1");
	} else if ([response.actionIdentifier isEqualToString:@"xgaction002"]) {
		NSLog(@"click from Action2");
	}

	[[XGPush defaultManager] reportXGNotificationResponse:response];

	completionHandler();
}

// App 在前台弹通知需要调用这个接口
- (void)xgPushUserNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {
	[[XGPush defaultManager] reportXGNotificationInfo:notification.request.content.userInfo];
	completionHandler(UNNotificationPresentationOptionBadge | UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert);
}
#endif

@end

3.3 修改ios capabilities

3.3.1 remote nitifications

3.3.2 push notifications

3.4 ios证书(开发/生产)

1. 证书生成步骤
2. p12转pem

openssl pkcs12 -in 项目名-Development-Certificates.p12 -out 项目名-Development-Certificates.pem -nodes

openssl pkcs12 -in 项目名-Prod-Certificates.p12 -out 项目名-Prod-Certificates.pem -nodes

注：证书运用场景

1. 开发证书
    xcode run debug
    xcode run release
2. 生产证书
    TestFlight
    Appstore

四. index.js中配置

参考: example/app/index.js

import React from 'react';
import XGPush from 'react-native-xinge-push';
import { Platform } from 'react-native';
import { Actions } from 'react-native-router-flux';

class AppRouter extends React.Component {
  constructor(props) {
    super(props);

    this.initPush();
  }
  componentDidMount() {
    this.onXGAddEvent();
  }
  componentWillUnmount() {
    this.onXGRemoveEvent();
  }

  // 信鸽通知跳转
  async onLinkToSceneKeyPath(notification) {
    const accessToken = await auth.getToken();
    if (!accessToken) return;//非登陆用户

    const customContent = isIOS ? notification.custom
      : JSON.parse(notification.custom_content);
    if (!customContent) return;//没有跳转参数

    // 根据信鸽push中的定制参数，进行链接跳转
    const { sceneKeyPath, notificationId } = customContent;
    if (!sceneKeyPath) return;

    const funcName = Actions.currentScene === sceneKeyPath ? 'replace' : 'push';
    Actions[funcName](sceneKeyPath, { notificationId });
  }
  // 信鸽增加事件
  onXGAddEvent() {
    XGPush.addEventListener('register', this.onRegister);
    XGPush.addEventListener('notification', this.onNotification);
  }
  // 信鸽移除事件
  onXGRemoveEvent() {
    XGPush.removeEventListener('register', this.onRegister);
    XGPush.removeEventListener('notification', this.onNotification);
  }
  // 初始化推送
  initPush = () => {
    if (Platform.OS === 'android') {
      XGPush.init(ACCESS_ID, ACCESS_KEY); //此处需要替换
    } else {
      XGPush.init(ACCESS_ID, ACCESS_KEY); //此处需要替换
    }
    this.initXGRegister();
  }
  // 注册
  initXGRegister = () => {
    XGPush.register('packageName')
      .then((result) => result)
      .catch((err) => {
        console.warn('xinge registration fail', err);
      });
  }
  // 注册成功
  onRegister = (deviceToken) => {
    console.log(`onRegister: ${deviceToken}`);
  }
  // 通知到达
  onNotification = (notification) => {
    if (notification.clicked === true) {
      this.onLinkToSceneKeyPath(notification);
      console.log(`app处于后台时收到通知${JSON.stringify(notification)}`);
    } else {
      console.log(`app处于前台时收到通知${JSON.stringify(notification)}`);
    }
  }

  render() {
      ...
  }
}

注

1、信鸽推送需要在app 打开，才能收到通知