(五)[极光推送通知 IOS & 安卓]React Native 从零到构建Android与IOS应用发布

由于我们都会遇到推送通知服务,而看到网上教程多半都是极光的,并且口碑都不错,所以我也使用极光的把。

整合极光推送也耗费了不少时间,问题不断,多亏极光官网的工作人员大力支持(邮件+QQ群),顺利的调试通了极光推送,感谢!

这是极光推送的RN官方开发者群,遇到问题找群主,妥妥的,qq群:553406342


写在前面,注意事项:

1、安卓和IOS的配置不一样

2、IOS推送机制与安卓不一样,安卓是直接连接极光推送服务器,而IOS则是需要通过苹果的ANPS下发到设备


所以,安卓可以通过模拟器进行调试,而苹果,必须要使用真机调试!!!!


准备事项:

1、注册极光推送官网账户,创建推送应用 获取appKey

2、(IOS)注册苹果development账户


安卓篇


安卓的安装配置稍微简单些,我推荐KenChoi的教程,链接:http://www.jianshu.com/p/6721a0360af9

手动配置主要注意几个点,当然自动配置也最好检查一下,我遇到过重复代码的问题

1、build.gradle需要添加jpush和jcore的依赖

2、settings.gradle需要include jpush-react-native和jcroe-react-native

3、AndroidManifest需要增加 meta-data

4、在 MainApplication.java 中注册JPushPackage类

5、MainActivity 加入监听事件onCreate、onPause、onResume

然后就可以通过import JPushModule from 'jpush-react-native'; 来使用jpush的方法了

值得注意的是:

JPushModule.initPush(); // 注册监听,在注册props时就需要

安卓下需要在componentDidMount中监听前加入以下代码才能获取推送(网上是这么说的,我没试过删除是否能收到,反正加了是能收到)

JPushModule.notifyJSDidLoad((resultCode) => {

    if (resultCode === 0) {

    }

});


监听方法新版的Jpush 安卓和IOS都一致了(在 componentDidMount 中 notifyJSDidLoad 之后)

JPushModule.addReceiveNotificationListener((message) => { // 收到通知时触发

        console.log(message);

});

JPushModule.addReceiveOpenNotificationListener((message) => { // 点击托盘通知进入APP触发

        console.log(message);

});

然后在 componentWillUnmount 中移除监听

JPushModule.removeReceiveCustomMsgListener();

JPushModule.removeReceiveNotificationListener();

安卓推送就OK了,一次性搞定


IOS篇

IOS非常麻烦,首先,你需要在development开发者中心中的 Certificates, Identifiers & Profiles

1、注册 iOS Certificates 证书


创建证书

如图,我已经创建了证书,需要创建的证书有4个,一个APNS开发者证书,一个APNS生产环境证书,一个IOS开发者证书,一个IOS生产环境证书。

关于如何创建证书,请移步:http://www.jianshu.com/p/01224fc523d4

2、注册APP应用,Identifiers

在Xcode的target下的General中的Signing中选择你的team,team也就是你的苹果开发者帐号,选择后点击development官网上的App Ids新增一个即可,上面的链接有资料

3、注册真机调试设备,Devices

用苹果手机连接mac,然后在itunes中点击手机图标,在手机信息中,点击序列号,会变成UDID,然后在development官网上的Devices中新增一个设备,输入名称和UDID注册即可

4、注册Provisioning Profile

注册方式跟前面差不多

这个需要注册开发者和生产环境的profile,否则XCode选择Signing 和push notifications时会出现红色感叹号

(请注意)上面的注册完毕后,下载APNS对应的证书,然后添加到mac钥匙串中(双击导入),然后右键对应的证书,点导出,然后需要输入加密的密码,你自己随便填,然后导出.p12的文件,其中需要注意的是, 请命名好各自对应的证书,开发环境和生产环境不一样,

而这两个证书是需要上传到极光推送应用配置中的IOS配置中的,会根据证书自动生成bundle ID,所以需要特别注意

做好这些工作后,就是安装JPUSH了

与安卓不太一样的就是

npm i -g jpush-react-native --save

yarn add jpush-react-native

npm i -g jcore-react-native --save

yarn add jcore-react-native

我试过使用

npm run configureJPush **** appname

自动配置,但是报错提示安卓文件找不到,我MAC下并未配置安卓环境

但是代码却是修改了,这是最省力的,所以这一步是需要执行

然后运行

react-native link

将library加入到xcode工程中

Libraries就多了 RCTJCoreModule.xcodeproj 和 RCTJPushModule.xcodeproj

然后选择 APP的target 点击 Capabilities 项,将 Push Notifications 从off改为On,之前的证书OK的话,这里就是2个勾了,如果证书不OK,那请重新配置证书,将 Background Modes 从Off改为On,只勾选 Remote notifications

然后点击 build Settings 项。将 Code Signing Identity 和它的子项全改为 iOS Developer

然后点击 Build Phases ,展开Link Binary With Libraries ,找到UserNotifications.framework 改为 Optional

然后在Xcode左侧打开 AppDelegate.h ,在UIKit后加入

#import <UIKit/UIKit.h>

//

static NSString *appKey=@"你的Appkey";

static NSString *channel=@"nil";

static BOOL isProduction=true; //生产环境false 正式true

注意,由于IOS9以上禁止访问HTTP,要求API必须请求HTTPS,所以包括极光我们需要增加策略

在info.plist的 App Transport Security Settings 下增加 Allow Arbitrary Loads = YES

在Exception Domains 下(react native init时就会创建并加入localhost访问http的策略)增加

jpush.cn = Dictionary

然后在jpush.cn下增加 

NSExceptionAllowsInsecureHTTPLoads=YES

NSIncludesSubdomains=YES

即可完成安全策略的配置,如图

!!!!!!注意,由于不支持HTTP,所以如果你的API是通过HTTP访问的话,你需要创建一个跟jpush.cn配置一样的你的域名在Exception Domains下面,否则会出现network failed错误!具体用顶级域名就好,多个请求域名要配置多个域名配置,马赛克部分就是我的域名,只要配置顶级域名就可支持子域名了。


Xcode安全策略配置

然后build一下Xcode,至此,极光IOS配置完成,很简单的但是由于不熟悉,所以走了很多弯路

然后,在IOS下必须要注册监听,否则无法正常监听推送

根据群主的建议,我在index.js 中加入了

import JPushModule from 'jpush-react-native';

JPushModule.addnetworkDidLoginListener(() => {

});

然后在component中操作和安卓一样,在componentDidMount中监听

JPushModule.addReceiveNotificationListener((message) => { // 收到通知时触发

console.log(message);

});

JPushModule.addReceiveOpenNotificationListener((message) => { // 点击托盘通知进入APP触发

console.log(message);

});

然后在componentWillUnmount中移除监听

JPushModule.removeReceiveCustomMsgListener();

JPushModule.removeReceiveNotificationListener();

然后上真机调试,OK,正常收到推送,至此极光推送配置完成,感谢群主HuminiOS的支持

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • 此处我用的是jpush-react-native,这个是极光官网维护的,还有一个是react-antive-jpu...
    liu_520阅读 24,198评论 95 39
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,056评论 25 707
  • 安装 安装,打开终端项目目录下运行,安卓jpush-react-native jpush-react-nativ...
    45b645c5912e阅读 3,503评论 0 4
  • 《诗经·王风·采葛》 彼采葛兮,一日不见,如三月兮! 彼采萧兮,一日不见,如三秋兮! 彼采艾兮!一日不见,如三岁兮...
    七徽阅读 2,827评论 55 67
  • 执子之手,与子偕老 十余混沌一日醒,缘达人相逢 倾情愿博君美眸,尽使伊弯唇 朝朝暮暮,暮暮朝朝 悠然现真心,伊笃信...
    罗若阅读 126评论 2 4