第十五章：集成JPUSH

如果不想自己搭建push server，则可以借助于第三方的api来实现push的功能，本文主要介绍ionic如何集成jpush。

具体步骤如下：

创建ionic应用：ionic_jpush。

申请jpush账号：创建应用，上传开发者证书，并且记录jpush_api_appkey。

安装jpush plugin

first way： cordova plugin add jpush-phonegap-plugin --variable API_KEY=your_jpush_appkey

second way：cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=your_jpush_appkey

third way：
git clone https://github.com/jpush/jpush-phonegap-plugin.git cordova plugin add $JPUSH_PLUGIN_DIR  --variable API_KEY=your_jpush_appkey

修改配置

找到路径：ionic_jpush\plugins\cn.jpush.phonegap.JPushPlugin\src\ios\PushConfig.plist，修改jpush_api_key，并且填写如下部分：

<key>APS_FOR_PRODUCTION</key>
<string>0</string>

在services中添加push工厂：

.factory('Push', function() {
var push;
return {
setBadge: function(badge) {
if (push) {
console.log('jpush: set badge', badge);
plugins.jPushPlugin.setBadge(badge);
}
},
setAlias: function(alias) {
if (push) {
console.log('jpush: set alias', alias);
plugins.jPushPlugin.setAlias(alias);
}
},
check: function() {
if (window.jpush && push) {
plugins.jPushPlugin.receiveNotificationIniOSCallback(window.jpush);
window.jpush = null;
}
},
init: function(notificationCallback) {
console.log('jpush: start init-----------------------');
push = window.plugins && window.plugins.jPushPlugin;
if (push) {
console.log('jpush: init');
plugins.jPushPlugin.init();
plugins.jPushPlugin.setDebugMode(true);
plugins.jPushPlugin.openNotificationInAndroidCallback = notificationCallback;
plugins.jPushPlugin.receiveNotificationIniOSCallback = notificationCallback;
}
}
};
})

在app.js的run中初始化jpush并添加监听事件：其中请修改别名“12345678”成为你想要的name。

.run(function($ionicPlatform,Push) {
$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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}

//jpush callback method
var notificationCallback = function(data) {
console.log('received data :' + data);
var notification = angular.fromJson(data);
//app 是否处于正在运行状态
var isActive = notification.notification;

// here add your code
//ios
if (ionic.Platform.isIOS()) {
window.alert(notification);
} else {
//非 ios(android)
}
};

//初始化
Push.init(notificationCallback);
//设置别名
Push.setAlias("12345678");

console.log('start to define addEventListener');
var onOpenNotification= function(event) {
console.log("JPushPlugin:onOpenNotification is triggered");
};
var onBackgroundNotification = function(event){
console.log("JPushPlugin:onBackgroundNotification is triggered");
};
var onReceiveNotification = function(event){
console.log("JPushPlugin:onReceiveNotification is triggered");
};
console.log('end to define addEventListener');
console.log('start to add addEventListener');
document.addEventListener("jpush.openNotification", onOpenNotification, false);
document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);
document.addEventListener("jpush.backgroundNotification", onBackgroundNotification, false);
console.log('end to add addEventListener');
});
})

编译ios项目：

ionic build iOS

使用xcode打开工程：进行证书配置，确保使用的开发者证书有apns的权限。

在jpush官网中进行push模拟。

编译Android项目：

ionic build android

使用Android Studio打开工程：确保Jpush的包名和Project的包名是一样的。

在jpush官网进行push模拟。

常见问题：

ios编译失败等一系列问题：最好请有经验的ios开发人员帮忙排查。

无法连接到jpush服务器：请检查api_key是否正确。

无法接收push信息：请检查jpush官网的push证书配置是否正确。

参考资料：

jpush plugin

ionic自定义jpush