我们的项目里使用极光推送来进行推送消息的接收。
1:在极光开发者服务中心配置应用
如果新建一个应用,会自动生成AppKey和Master Secret:
然后进行推送设置,否则无法接收推送。
Android:
IOS:
注意这里iOS的APNS证书文件需要到苹果开发者中心进行配置,生产环境是用于发布之后的正式环境,开发环境是用于测试推送环境的。
极光官网文档有关于如何配置iOS证书的非常详细步骤的介绍,按照这篇文章一步步来,不会出现什么问题。
如果Android和iOS的推送设置成功,可以在开发者服务中心进行测试
如果没有设置成功,那么目标平台的几个按钮就相应不可用。如果客户端那边连接成功,这里发送通知就可以收到了。
2:客户端连接极光服务器
极光官方维护的客户端插件包括HBuilder,React等等,我们使用PhoneGap插件:
cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey
我们将其封装成为TS版本:
import {Observable} from 'rxjs/Observable';
/**
* @name JPush
* @description
* This plugin does something
*
* @usage
* ```
* import { JPush } from 'ionic-native';
*
* JPush.functionName('Hello', 123)
* .then((something: any) => doSomething(something))
* .catch((error: any) => console.log(error));
*
* ```
*/
export declare class JPush {
init(): Promise<any>;
stopPush(): Promise<any>;
resumePush(): Promise<any>;
isPushStopped(): Promise<any>;
getRegistrationID(): Promise<any>;
setTagsWithAlias(tags?: string[], alias?: string): Promise<any>;
setTags(tags?: string[]): Promise<any>;
// setAlias(alias?: string): Promise<any>;
setAlias(params: {
sequence: number;
alias?: string;
}): Promise<any>;
deleteAlias(params: {sequence: number}): Promise<any>;
setBadge(badgeNum?: number): Promise<any>;
setApplicationIconBadgeNumber(badgeNum?: number): Promise<any>;
openNotification(): Observable<any>;
receiveNotification(): Observable<any>;
receiveMessage(): Observable<any>;
getUserNotificationSettings(): Promise<any>;
setDebugModeFromIos(): Promise<any>;
setDebugMode(isDebug?: boolean): Promise<any>;
}
在Helper.Service.ts里面封装了这些jPush方法,包括init,setAlias等等常用方法:
jointDeviceNameAndSN(deviceName,deviceSN) {
return deviceName+' ('+ deviceSN +')';
}
initJpush() {
if (!this.nativeService.isMobile()) {
return;
}
if(this.nativeService.isIos()){
// this.jPush.setDebugModeFromIos();
}else {
// this.jPush.setDebugMode(true);
}
this.jPush.init();
this.jPush.getRegistrationID().then(
data=>{
console.log("registerationID:"+data);
}
);
this.jPushAddEventListener();
}
private jPushAddEventListener() {
this.jPush.getUserNotificationSettings().then(result => {
if (result == 0) {
console.log('系统设置中已关闭应用推送');
} else if (result > 0) {
console.log('系统设置中打开了应用推送');
}
});
//点击通知进入应用程序时会触发的事件
document.addEventListener("jpush.openNotification", event => {
this.setIosIconBadgeNumber(0);
let extraFromPush=event["extras"];
if(this.nativeService.isIos()){
extraFromPush=event;
}
if(this.globalData.haveEnterHomePage){//应用已打开
this.handleDataFromPush(extraFromPush);
}else { //应用处于关闭状态
setTimeout(()=>{
this.handleDataFromPush(extraFromPush);
},2000)
}
}, false);
//收到通知时会触发该事件
document.addEventListener("jpush.receiveNotification", event => {
let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
console.log("jpush.receiveNotification" + content);
}, false);
//收到自定义消息时触发这个事件
document.addEventListener("jpush.receiveMessage", event => {
let message = this.nativeService.isIos() ? event['content'] : event['message'];
console.log("jpush.receiveMessage" + message);
}, false);
//设置标签/别名回调函数
document.addEventListener("jpush.setTagsWithAlias", event => {
console.log("onTagsWithAlias");
let result = "result code:" + event['resultCode'] + " ";
result += "tags:" + event['tags'] + " ";
result += "alias:" + event['alias'] + " ";
console.log(result);
}, false);
}
handleDataFromPush(extraFromPush){
if(extraFromPush.CreateOrderId){
this.app.getActiveNav().push(WorkOrderDetailPage,{orderId:extraFromPush.CreateOrderId})
}else if(extraFromPush.MaintenanceOrderId) {
this.app.getActiveNav().push(MaintanceManagePage,{orderId:extraFromPush.MaintenanceOrderId})
} else if(extraFromPush.SN){
this.app.getActiveNav().push(ReceivePushDeviceInfoPage,{extraData:extraFromPush})
}else if(extraFromPush.NewCreateOrderId){
this.app.getActiveNav().push(MaintanceManagePage,{orderId:extraFromPush.NewCreateOrderId})
}
}
//设置标签
setTags() {
if (!this.nativeService.isMobile()) {
return;
}
let tags = [];
if (this.nativeService.isAndroid()) {
tags.push('android');
}
if (this.nativeService.isIos()) {
tags.push('ios');
}
console.log('设置setTags:' + tags);
// this.jPush.setTags(tags);
}
//设置别名,一个用户只有一个别名
setAlias(userEmail:string) {
if (!this.nativeService.isMobile()) {
return;
}
this.jPush.setAlias({ sequence: 1, alias: userEmail+'' }).then(
(data)=>{
console.log(data)
}
).catch(
(error)=>{
console.log(error)
}
);
}
//删除别名
deleteAlias(){
if (!this.nativeService.isMobile()) {
return;
}
this.jPush.deleteAlias({ sequence: 100 });
}
setTagsWithAlias(userId) {
if (!this.nativeService.isMobile()) {
return;
}
console.log('设置setTagsWithAlias:' + userId);
// this.jPush.setTagsWithAlias(['man', 'test'], '' + userId);
}
//设置ios角标数量
setIosIconBadgeNumber(badgeNumber) {
if (this.nativeService.isIos()) {
this.jPush.setBadge(badgeNumber);//上传badge值到jPush服务器
this.jPush.setApplicationIconBadgeNumber(badgeNumber);//设置应用badge值
}
}
在app.component.ts我们调用jpushInit(),如果连接成功,每台设备和极光服务器会通过RegisterId相连,如果没有获取到RegisterId,说明没有连接成功。
在home.ts我们设置别名:
ionViewDidLoad() {
let currentUserId:string=this.globalData.userId;
let patternUserId=currentUserId.replace(/[&\|\\\*^%$#@\-]/g,"");
setTimeout(()=>{
this.helper.setTags();
this.helper.setAlias(patternUserId);
},3000);
}
在退出登录的时候,取消别名:
showConfirm() {
this.translate.get(['Settings.LoginOut.name','Settings.LoginOut.message','Shared.OkText','Shared.CancelText']).subscribe((res) => {
let confirm = this.alertCtrl.create({
title: res['Settings.LoginOut.name'],
message: res['Settings.LoginOut.message'],
buttons: [
{
text: res['Shared.CancelText']
},
{
text: res['Shared.OkText'],
handler: () => {
this.helper.deleteAlias();
this.loginService.logout();
this.navCtrl.setRoot('LoginPage');
}
}
]
});
confirm.present();
});
}
这样,退出账户之后就收不到推送了。
注意,调试的时候,一定要关注网络情况。因为很多公司的无线网处于安全考虑,是限制IP访问的。所以如果你的测试手机如果接收不到推送,看看是不是网络问题。