首页 > 代码库 > IONIC集成jPush极光推送

IONIC集成jPush极光推送

一.简介:

极光推送(JPush)是独立的第三方云推送平台,致力于为全球移动应用开发者提供专业、高效的移动消息推送服务。

极光推送,英文简称 JPush,是一个面向普通开发者开放的,免费的第三方消息推送服务。

 

二.官网:https://www.jiguang.cn/

首先注册一个账号,登陆平台,在控制台添加我们的应用信息

技术分享

点击提交

会成一个AppKey和Master Secret这两个密钥主要用来配置服务端发送通知使用。

 

三.开整

官方的栗子:https://github.com/jpush/jpush-phonegap-plugin

1.首先创建一个ionic项目jpushDemo

ionic start -a jpushDemo -i com.kangnuo.jpushDemo jpushDemo blankionic start -a 应用名  -i 包名 文件夹名 blank
项目创建完成,用IDE打开后发现这是一个完全空的项目,打开根目录的config.xml发现上面配的-i com.kangnuo.jpushDemo 也就是包名完全没啥用,还是com.ionicframework.starter,手动把包名改下com.kangnuo.jpushDemo
 
添加android平台
 
ionic  platform  add  android
 
2.安装插件
 
插件下载:git clone https://github.com/jpush/jpush-phonegap-plugin.git
 
jPush 插件需要依赖org.apache.cordova.device这个插件,看插件名称为旧版本device插件,新版为cordova-plugin-device,因为我们现在APP使用的为新版,先装上新版本试试
 
ionic  plugin  add  cordova-plugin-device
然后安装jpush: ionic plugin add 你的插件目录/jpush-phonegap-plugin –variable API_KEY=appKey
 
发现报错,error了一大堆英文,大体意思是我们需要org.apache.cordova.device这个插件,却在项目中发现cordova-plugin-device这个插件。OK,删掉cordova-plugin-device插件,装上org.apache.cordova.device这个,重新装jpush插件,成功。。(注:现在新版插件已修改,没有这个问题了)
 
有没有什么办法不用旧版的device插件,用最新的呢–>  看下jpush插件的config.xml文件 发现这样一行配置
 
<dependency id=”org.apache.cordova.device” url=”https://github.com/apache/cordova-plugin-device.git”  /> 
 
id是老版的插件,url却指向的新版插件,把id改成cordova-plugin-device重装试下,OK 安装成功。
 
3.项目配置
 
打开项目根目录中app.js
 
直接贴配置代码
 
angular.module(‘starter’, [‘ionic’,’ui.router’]).run(function($ionicPlatform) {    $ionicPlatform.ready(function () {        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard        // for form inputs)        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);            cordova.plugins.Keyboard.disableScroll(true)        }        if (window.StatusBar) {            StatusBar.styleDefault();        }        /**         * 极光推送业务开始         */        //启动极光推送服务        window.plugins.jPushPlugin.init();        //设置显示最新得条数        window.plugins.jPushPlugin.setLatestNotificationNum(5);        //调试模式        if (device.platform == "Android") {            window.plugins.jPushPlugin.setDebugMode(true);            window.plugins.jPushPlugin.setStatisticsOpen(true);        }else {            window.plugins.jPushPlugin.setDebugModeFromIos();            window.plugins.jPushPlugin.setApplicationIconBadgeNumber(0);        }        //获取RegistrationID        getRegistrationID();        //设置别名        window.plugins.jPushPlugin.setAlias("bbbb");        if (window.localStorage.getItem("platformType") == "WEIXIN" && window.localStorage.getItem("RegistrationID")){            jPushInfo(window.localStorage.getItem("key"),window.localStorage.getItem("RegistrationID"));            window.plugins.jPushPlugin.setAlias(window.localStorage.getItem("RegistrationID"));        }        if (device.platform == "Android") {            //ANDROID接收消息            window.plugins.jPushPlugin.receiveNotificationInAndroidCallback = function (data) {                //expresstion            };            //ANDROID打开消息            window.plugins.jPushPlugin.openNotificationInAndroidCallback = function(data){                //expresstion            };        }else {            //IOS接收消息(APP在前台)            document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);            //IOS打开消息            document.addEventListener("jpush.openNotification", onOpenNotification, false);            //IOS接收消息(APP在后台)            document.addEventListener("jpush.backgoundNotification", onBackgroundNotification, false);        }        /**         * 极光推送业务结束         */    });    var onReceiveNotification = function(event) {        //expresstion    };    var onBackgroundNotification = function (event) {        //expresstion    };    var onOpenNotification = function(event) {        //expresstion    };    var getRegistrationID = function() {        window.plugins.jPushPlugin.getRegistrationID(onGetRegistrationID);    };    var onGetRegistrationID = function(data) {        try {            console.log("JPushPlugin:registrationID is " + data);            if (data.length == 0) {                window.setTimeout(getRegistrationID, 1000);            }else {                window.localStorage.setItem("RegistrationID",data);            }        } catch (exception) {            console.log(exception);        }    };    var isReceiveFunc = function (pushId) {        //expresstion    };    var isOpenFunc = function (pushId) {        //expresstion    };        var jPushInfo = function (key,RegistrationID) {              //expresstion    };}); 
APP配置完成
 
打开极光控制台,找到jpushDemo的应用->推送消息,填写推送内容点击推送,手机就会收到推送消息了。
 
注:APP在运行时,手机会提示jPush建议集成SDK时添加统计代码。
 
解决办法:
        在 platforms/android/src/com/kangnuo/jpushDemo/MainActiovity.java中MainActivity类添加以下代码
 
import cn.jpush.android.api.JPushInterface;@Overrideprotected void onResume() {  super.onResume();  JPushInterface.onResume(this);}@Overrideprotected void onPause() {  super.onPause();  JPushInterface.onPause(this);}

 

4.调试

jPush插件在使用过程中会用到手机接收通知,以及用户打开手机通知等事件,这些jPush都已有现成的方法(receiveMessageInAndroidCallback,openNotificationInAndroidCallback ==)只要在这些回调方法中添加自己的业务逻辑代码就可以,调试过程中SDK使用logCat来打印APP运行状态。而且jPush在接受自定义消息时是不会显示在手机通知栏中,需要通过log来进行调试,ionic APP中可以使用CLI方式运行来调试。

ionic cli 使用说明: http://ionicframework.com/docs/v2/cli/run/

命令:ionic run android -l -i

注:在使用中发现 app安装到手机上打开一直提示 application error,network error ,需要添加白名单插件 ,运行

ionic  plugin  add  cordova-plugin-whitelist

然后就可以在terminal看到手机app运行时log信息了。。

 

5.服务端推送java实现方式

首先在项目中添加依赖包,打开pom.xml添加

<dependency><groupId>cn.jpush.api</groupId><artifactId>jpush-client</artifactId><version>3.2.9</version></dependency>

推送实现方法(官方文档很全)

    JPushClient jpushClient = new JPushClient(masterSecret, appKey, 3);        // For push, all you need do is to build PushPayload object.        PushPayload payload = buildPushObject_all_all_alert();        try {            PushResult result = jpushClient.sendPush(payload);            LOG.info("Got result - " + result);        } catch (APIConnectionException e) {            // Connection error, should retry later            LOG.error("Connection error, should retry later", e);        } catch (APIRequestException e) {            // Should review the error, and fix the request            LOG.error("Should review the error, and fix the request", e);            LOG.info("HTTP Status: " + e.getStatus());            LOG.info("Error Code: " + e.getErrorCode());            LOG.info("Error Message: " + e.getErrorMessage());        }    //进行推送的关键在于构建一个 PushPayload 对象。以下示例一般的构建对象的用法。    //快捷地构建推送对象:所有平台,所有设备,内容为 ALERT 的通知。    public static PushPayload buildPushObject_all_all_alert() {        return PushPayload.alertAll(ALERT);    }

 

6.完成

IONIC集成jPush极光推送