一、极光推送基于cordova插件的，所以安装cordova插件
命令：npm install -g cordova
查看cordova是否安装成功 cordova -v （-v是 --version 的缩写，代表检测版本）
image
二、按照极光官网提供安装，有三种方式
1、 通过 Cordova Plugins 安装，要求 Cordova CLI 5.0+：
cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey
2、直接通过 url 安装：
cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable APP_KEY=your_jpush_appkey
3、下载到本地安装：
cordova plugin add Your_Plugin_Path --variable APP_KEY=your_jpush_appkey
** your_jpush_appkey 是指在极光推送官网拿到的APP_KEY的值**
image
配置推送设置
image
1、安卓的配置（比较简单）
打开本地项目中的config.xml
image
image
安卓配置的应用包名和该文件里的包名保持一致
2、ios的配置
需要生成两个证书（生产证书和开发证书）
三、安装 @jiguang-ionic/jpush 包
命令：npm install --save @jiguang-ionic/jpush
安装 @jiguang-ionic/jpush 以后，在 app.module.ts 文件中，导入，然后添加到 服务（providers）中。
import { JPush } from '@jiguang-ionic/jpush';
...
providers:[
....
JPush,
....
]
四、使用极光推送
极光推送事件：
接收消息触发 jpush.receiveNotification
打开消息触发 jpush.openNotification
接收本地消息 jpush.receiveLocalNotification
五、代码示范
import { Injectable } from '@angular/core';
import { NativeService } from './NativeService';
import { JPush } from '@jiguang-ionic/jpush';
import {Observable} from "rxjs/Observable";
/**
* Helper类存放和业务有关的公共方法
* @description
*/
@Injectable()
export class JpushProvider {
constructor(private jPush: JPush,
private nativeService: NativeService,
) {
}
/**
* 从文件对象数组中找出指定id对应的文件对象
* @param fileList 文件对象数组
* @param idList id数组
*/
static findFileListById(fileList, ids) {
if (!ids || ids.length === 0) {
return [];
}
const newFileList = [];
for (const file of fileList) {
for (const id of ids) {
if (file.id == id) {
newFileList.push(file);
}
}
}
return newFileList;
}
/**
* 极光推送
*/
initJpush() {
if (!this.nativeService.isMobile()) {
return;
}
this.jPush.init();
this.jPush.setDebugMode(true);
this.jPushAddEventListener();
}
getRegistrationID(): Promise<any> {
return this.jPush.getRegistrationID();
}
// 详细文档 https://github.com/jpush/jpush-phonegap-plugin/blob/master/doc/Common_detail_api.md
private jPushAddEventListener() {
this.jPush.getUserNotificationSettings().then(result => {
if (result == 0) {
console.log('jpush-系统设置中已关闭应用推送');
} else if (result > 0) {
console.log('jpush-系统设置中打开了应用推送');
}
});
// 点击通知进入应用程序时会触发的事件
// document.addEventListener('jpush.openNotification', event => {
// this.setIosIconBadgeNumber(0);
// const content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
// // this.events.publish('jpush.openNotification', content);
// }, false);
// // 收到通知时会触发该事件
// document.addEventListener('jpush.receiveNotification', event => {
// const content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
// console.log('jpush.receiveNotification' + content);
// }, false);
// // 收到自定义消息时触发这个事件
// document.addEventListener('jpush.receiveMessage', event => {
// const message = this.nativeService.isIos() ? event['content'] : event['message'];
// console.log('jpush.receiveMessage' + message);
// }, false);
}
// 点击通知进入应用程序时会触发的事件
openNotification(): Observable<any>{
return new Observable(observer => {
document.addEventListener('jpush.openNotification', (event: any) => {
observer.next(event);
}, false)
});
}
// 收到通知时会触发该事件
receiveNotification(): Observable<any>{
let content;
return new Observable(observer => {
document.addEventListener('jpush.receiveNotification', (event: any) => {
if (this.nativeService.isIos()) {
content = event.aps.alert;
} else {
content = event.alert;
}
this.jPush.setBadge(0);
this.jPush.setApplicationIconBadgeNumber(0);
}, false);
observer.next(content);
});
}
// 收到自定义消息时触发这个事件
receiveMessage() {
let content;
return new Observable(observer => {
document.addEventListener('jpush.receiveMessage', event => {
content = this.nativeService.isIos() ? event['content'] : event['message'];
console.log('jpush.receiveMessage' + content);
}, false);
observer.next(content);
});
}
/* tslint:disable */
setAlias(userId) {
this.jPush.setAlias({sequence: 1, alias: userId}).then(result => {
console.log('jpush-设置别名成功:');
console.log(JSON.stringify(result));
}, error => {
console.log(JSON.stringify(error))
})
}
deleteAlias() {
if (!this.nativeService.isMobile()) {
return;
}
this.jPush.deleteAlias({sequence: 2}).then(result => {
console.log('jpush-删除别名成功:');
console.log(result);
}, error => {
console.log('jpush-设删除别名失败:', error);
})
}
setTags(tags: Array<string> = []) {
if (!this.nativeService.isMobile()) {
return;
}
if (this.nativeService.isAndroid()) {
tags.push('android');
}
if (this.nativeService.isIos()) {
tags.push('ios');
}
this.jPush.setTags({sequence: 3, tags}).then(result => {
console.log('jpush-设置标签成功:');
console.log(result);
}, error => {
console.log('jpush-设置标签失败:', error);
})
}
deleteTags(tags: Array<string> = []) {
if (!this.nativeService.isMobile()) {
return;
}
this.jPush.deleteTags({sequence: 4, tags}).then(result => {
console.log('jpush-删除标签成功:');
console.log(result);
}, error => {
console.log('jpush-删除标签失败:', error);
})
}
// 设置ios应用角标数量
setIosIconBadgeNumber(badgeNumber) {
if (this.nativeService.isIos()) {
this.jPush.setBadge(badgeNumber); // 上传badge值到jPush服务器
this.jPush.setApplicationIconBadgeNumber(badgeNumber); // 设置应用badge值
}
}
/* tslint:enable */
}
四、极光推送测试
1552637759(1).png
1552637782(1).png
