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() {
      ...
  }
}

注

一、信鴿推送須要在app 打開，才能收到通知