阿里云移动推送+ReactNative最佳实践

• 1. 构建您的ReactNative
• 2. 接入移动推送Android SDK
  • 2.1 接入推送SDK
  • 2.2 JavaScript调用推送SDK Native接口
    • 2.2.1 创建PushModule模块
    • 2.2.2 注册模块
    • 2.2.3 添加模块
    • 2.2.4 在JavaScript中调用Native方法
  • 2.3 将推送消息传递到JavaScript
    • 2.3.1 消息接收Receiver改造
    • 2.3.2 JavaScript监听相关事件
  • 2.4 初始化
• 3 接入移动推送iOS SDK
  • 3.1 控制台下载SDK
  • 3.2 SDK集成
  • 3.3 Xcode 设置
  • 3.4 SDK配置

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

近年来Web化已成为移动端开发的一大趋势，越来越多的开发者倾向于使用ReactNative等web框架来开发App，而阿里云移动推送同样支持ReactNative开发模式，接下来为大家介绍如何在ReactNative工程中集成阿里云推送。

1. 构建您的ReactNative

如果您已有构建好的ReactNative工程，可直接跳过本节。如果您是第一次接触ReactNative，可以参考官方教程创建自己的第一个ReactNative应用。

2. 接入移动推送Android SDK

本节以ReactNative实例工程AwesomeProject作为实例工程为大家介绍Android推送SDK的接入步骤。可先下载Demo示例工程,再结合本教程效果更佳。

2.1 接入推送SDK

ReactNative模式下接入移动推送SDK的方式和传统Android开发模式下接入SDK一样，相关接入方式可以参考：移动推送SDK接入指南

2.2 JavaScript调用推送SDK Native接口

ReactNative模式下常常需要通过JavaScript调用推送SDK native接口，完整调用过程包含以下三步。

2.2.1 创建PushModule模块

创建PushModule，继承自ReactContextBaseJavaModule,可参考以下代码：

public class PushModule extends ReactContextBaseJavaModule {
    private static ReactContext context;
    public PushModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }
    public static ReactContext getContext() {
        return context;
    }
    //模块名，在JavaScript中调用相关方法时需要首先引入MPush模块
    @Override
    public String getName() {
        return "MPush";
    }
    @ReactMethod
    public void getDeviceId(Callback callback) {
        callback.invoke(PushServiceFactory.getCloudPushService().getDeviceId());
    }
    @ReactMethod
    public void bindAccount(String account, final Callback callback) {
        PushServiceFactory.getCloudPushService().bindAccount(account, new CommonCallback() {
            @Override
            public void onSuccess(String s) {
                callback.invoke("bind account success");
            }
            @Override
            public void onFailed(String s, String s1) {
                callback.invoke("bind account failed. errorCode:" + s + ", errorMsg:" + s1);
            }
        });
    }
    ......
}

• getName(): 这个方法用于在JavaScript 端标记这个模块。这里我们把这个模块命名为 MPush，这样就可以在 JavaScript 中通过 NativeModules.MPush 访问到这个模块
• @ReactMethod：要导出一个方法给 JavaScript 使用，Java 方法需要使用注解 @ReactMethod，方法的返回类型必须为 void。React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件

2.2.2 注册模块

创建一个 Package 类 PushPackage 并实现 ReactPackage，在 createNativeModules 方法中添加这个模块

public class PushPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new PushModule(reactContext));
        return modules;
    }
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

2.2.3 添加模块

在 Application 中的 ReactNativeHost 实例里 getPackages 方法添加 PushPackage 实例

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

2.2.4 在JavaScript中调用Native方法

//引入MPush模块
var {NativeModules}=require('react-native');
var mPush = NativeModules.MPush;
export default class AwesomeProject extends Component {
......
//调用Native方法
  getDeviceId() {
      var that = this;
      mPush.getDeviceId(function(args) {
          that.setState({
              deviceIdBtnTitle: args
          });
      });
  }
  ......
}

2.3 将推送消息传递到JavaScript

当终端接收到推送消息时需要将对应的消息发送到JavaScript，此时需要用到ReactNative的事件机制。

2.3.1 消息接收Receiver改造

在消息接收回调函数中添加事件发送逻辑：

public class MyMessageReceiver extends MessageReceiver {
    public MyMessageReceiver() {
        super();
    }
    @Override
    protected void onMessage(Context context, CPushMessage cPushMessage) {
        super.onMessage(context, cPushMessage);
        WritableMap params = Arguments.createMap();
        params.putString("messageId", cPushMessage.getMessageId());
        params.putString("content", cPushMessage.getContent());
        params.putString("title", cPushMessage.getTitle());
        PushModule.sendEvent(getReactContext(), "onMessage", params);
    }
    @Override
    protected void onNotification(Context context, String s, String s1, Map<String, String> map) {
        super.onNotification(context, s, s1, map);
        WritableMap params = Arguments.createMap();
        params.putString("content", s1);
        params.putString("title", s);
        for (Map.Entry<String, String> entry: map.entrySet()) {
            params.putString(entry.getKey(), entry.getValue());
        }
        sendEvent(getReactContext(), "onNotification", params);
    }
        private void sendEvent(ReactContext context, String eventName, @Nullable WritableMap params) {
        if (context == null) {
            Log.i(TAG, "reactContext==null");
        }else{
            context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit(eventName, params);
        }
    }
}

2.3.2 JavaScript监听相关事件

//导入相关模块
import {
  AppRegistry,
  MPush,
  DeviceEventEmitter,
  ......
} from 'react-native';
export default class AwesomeProject extends Component {
......
    //绑定事件
    componentDidMount() {
          DeviceEventEmitter.addListener('onMessage', this.onMessage);
          DeviceEventEmitter.addListener('onNotification', this.onNotification);
      }
    //解绑事件
    componentWillUnmount() {
        DeviceEventEmitter.removeListener('onMessage', this.onMessage);
        DeviceEventEmitter.removeListener('onNotification', this.onNotification);
    }
    //事件处理逻辑
    onMessage(e){
        alert("Message Received. Title:" + e.title + ", Content:" + e.content);
    }
    onNotification(e){
        alert("Notification Received.Title:" + e.title + ", Content:" + e.content);
    }
}

2.4 初始化

在Application中初始化推送SDK：

public class MainApplication extends Application implements ReactApplication {
  private static final String TAG = MainApplication.class.getName();
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    this.initCloudChannel();
  }
  private void initCloudChannel() {
    PushServiceFactory.init(this.getApplicationContext());
    CloudPushService pushService = PushServiceFactory.getCloudPushService();
    pushService.register(this.getApplicationContext(),  new CommonCallback() {
      @Override
      public void onSuccess(String s) {
        Log.e(TAG, "init cloudchannel success");
      }
      @Override
      public void onFailed(String s, String s1) {
        Log.e(TAG, "init cloudchannel failed. errorCode:" + s + ". errorMsg:" + s1);
      }
    });
  }
}

3 接入移动推送iOS SDK

本节以ReactNative实例工程AwesomeProject作为实例工程为大家介绍iOS推送 手动集成 SDK 的步骤。

3.1 控制台下载SDK

参考：推送SDK下载

3.2 SDK集成

• 打开 AwesomeProject/ios/AwesomeProject.xcodeproj，将推送iOS SDK拖进工程中。
• Build Phases -> Link Binary With Libraries中，引入下列的公共包：
  • libz.tbd
  • libresolv.tbd
  • CoreTelephony.framework
  • SystemConfiguration.framework
  • libsqlite3.tbd（阿里云平台下载的SDK无需依赖，百川平台下载的SDK需要依赖）

注意：Targets -> Build Settings -> Linking -> Other Linker Flags，请加上-ObjC这个属性，否则推送服务无法正常使用。如果之前已经设置了force_load，需要设置-force_load <framework_path>/CloudPushSDK.framework/CloudPushSDK。

3.3 Xcode 设置

Xcode 8 打开推送开关，TARGETS > Capabilitie > Push Notifications，并会自动在项目中生成 .entitlement）文件。

3.4 SDK配置

• 可参考iOS SDK配置和iOS API介绍。

• 工程引入头文件#import <CloudPushSDK/CloudPushSDK.h>

• SDK 初始化

- (void)initCloudPush {
    [CloudPushSDK asyncInit:@"*****" appSecret:@"*****" callback:^(CloudPushCallbackResult *res) {
        if (res.success) {
            NSLog(@"Push SDK init success, deviceId: %@.", [CloudPushSDK getDeviceId]);
            } else {
                NSLog(@"Push SDK init failed, error: %@", res.error);       
                }
            }];
        }

• 向苹果APNs注册获取deviceToken并上报到阿里云推送服务器；

 /**
 *    注册苹果推送，获取deviceToken用于推送
 *
 *    @param     application
 */
- (void)registerAPNS:(UIApplication *)application {
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0) {
        // iOS 8 Notifications
        [application registerUserNotificationSettings:
         [UIUserNotificationSettings settingsForTypes:
          (UIUserNotificationTypeSound | UIUserNotificationTypeAlert | UIUserNotificationTypeBadge)
                                           categories:nil]];
        [application registerForRemoteNotifications];
    }
    else {
        // iOS < 8 Notifications
        [[UIApplication sharedApplication] registerForRemoteNotificationTypes:
         (UIRemoteNotificationTypeAlert | UIRemoteNotificationTypeBadge | UIRemoteNotificationTypeSound)];
    }
}
/*
 *  苹果推送注册成功回调，将苹果返回的deviceToken上传到CloudPush服务器
 */
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    [CloudPushSDK registerDevice:deviceToken withCallback:^(CloudPushCallbackResult *res) {
        if (res.success) {
            NSLog(@"Register deviceToken success.");
        } else {
            NSLog(@"Register deviceToken failed, error: %@", res.error);
        }
    }];
}
/*
 *  苹果推送注册失败回调
 */
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
    NSLog(@"didFailToRegisterForRemoteNotificationsWithError %@", error);
}

• 推送消息到来监听；

/**
 * 注册推送消息到来监听
 */
- (void)registerMessageReceive {
 [[NSNotificationCenter defaultCenter] addObserver:self  selector:@selector(onMessageReceived:) name:@"CCPDidReceiveMessageNotification" object:nil];
}
/**
 * 处理到来推送消息
 *
 * @param notification
 */
- (void)onMessageReceived:(NSNotification *)notification {
     CCPSysMessage *message = [notification object];
     NSString *title = [[NSString alloc] initWithData:message.title encoding:NSUTF8StringEncoding];
     NSString *body = [[NSString alloc] initWithData:message.body encoding:NSUTF8StringEncoding];
     NSLog(@"Receive message title: %@, content: %@.", title, body);
}

• 通知打开监听；

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     // 点击通知将App从关闭状态启动时，将通知打开回执上报
     // [CloudPushSDK handleLaunching:launchOptions];(Deprecated from v1.8.1)
     [CloudPushSDK sendNotificationAck:launchOptions];
     return YES;
}
/*
 * App处于启动状态时，通知打开回调
 */
- (void)application:(UIApplication*)application didReceiveRemoteNotification:(NSDictionary*)userInfo {
     NSLog(@"Receive one notification.");
     // 取得APNS通知内容
     NSDictionary *aps = [userInfo valueForKey:@"aps"];
     // 内容
     NSString *content = [aps valueForKey:@"alert"];
     // badge数量
     NSInteger badge = [[aps valueForKey:@"badge"] integerValue];
     // 播放声音
     NSString *sound = [aps valueForKey:@"sound"];
     // 取得Extras字段内容
     NSString *Extras = [userInfo valueForKey:@"Extras"]; //服务端中Extras字段，key是自己定义的
     NSLog(@"content = [%@], badge = [%ld], sound = [%@], Extras = [%@]", content, (long)badge, sound, Extras);
     // iOS badge 清0
     application.applicationIconBadgeNumber = 0;
     // 通知打开回执上报
     // [CloudPushSDK handleReceiveRemoteNotification:userInfo];(Deprecated from v1.8.1)
     [CloudPushSDK sendNotificationAck:userInfo];
}