文档地址:https://github.com/jpush/jpush-phonegap-plugin
基于ionic3 和 ionic-native3 的极光推送封装
注意:
插件从 v3.4.0 开始支持 cordova-android 7.0.0,因 cordova-android 7.0.0 修改了 Android 项目结构,因此不兼容之前的版本,升级前请务必注意。
如果需要安装之前版本的插件,请先安装 v1.2.0 以下版本(建议安装 v1.1.12)的 cordova-plugin-jcore,再安装旧版本插件(比如 v3.3.2),否则运行会报错。
因为我的cordova-Android的版本是6.3.0,所有先按照上面的说法降级安装
第一步安装jcore:
ionic cordova plugin add cordova-plugin-jcore@1.1.12
第二步:安装旧版本插件
ionic cordova plugin add jpush-phonegap-plugin@3.3.2 --variable APP_KEY="7f09a29ec8e2316c9b9b4021"
第三步:
npm install --save @jiguang-ionic/jpush
如何使用
注意:
应用的包名一定要和 APP_KEY 对应应用的包名一致,否则极光推送服务无法注册成功。
在使用 8 或以上版本的 Xcode 调试 iOS 项目时,需要先在项目配置界面的 Capabilities 中打开 Push Notifications 开关。
1、安装官方Cordova插件
ionic cordova plugin add jpush-phonegap-plugin --variable APP_KEY="7f09a29ec8e2316c9b9b4021"
或者直接通过URL安装
ionic cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable APP_KEY=your_jpush_appkey
2、安装模块ionic3-jpush
npm install --save @jiguang-ionic/jpush
3、在app.module.ts中引入,并加入到@NgModule的 providers 中
import { JPush } from '@jiguang-ionic/jpush';
@NgModule({
...
providers: [ JPush ],
})
export class AppModule { }4、在Component中调用方法
//...
import { JPush } from '@jiguang-ionic/jpush';
@Component({
template: `
<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
constructor (public jPush: JPush){
this.jPush.getRegistrationID().then(regid => {
console.log(regid)
})
}
}初始化:
this.jpushserviceProvider.initJPush();
监听到数据再home.ts里面:

完整的provider j-push-service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Events,Platform } from "ionic-angular";
import { JPush } from "@jiguang-ionic/jpush"; //npm install ionic3-jpush --save
/*
Generated class for the JPushServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class JPushServiceProvider {
constructor(private platform: Platform,public http: Http,private events: Events, private jpush: JPush) {
}
/**
* 初始化极光推送
* @returns {void}
* @memberof Helper
*/
public initJPush(): void
{
//是否是真机,如果不是就返回不向下执行了
if(!this.isMobile()) return;
this.jpush.init().then(result => {
//初始化时设置标签(android、ios)
// this.setTags();
// alert("极光推送初始化"+ result);
}).catch(error => {
// alert("极光推送初始化失败"+ error);
});
//极光推送事件监听
this.addEventListener();
}
/**
* 极光推送增加监听事件
* @private
* @memberof Helper
*/
private addEventListener(): void
{
this.jpush.getUserNotificationSettings().then(result => {
if(result == 0){
this.jpush.resumePush();
}
if(result > 0){
}
});
//点击通知进入应用程序时会触发的事件,点击通知进入程序
document.addEventListener("jpush.openNotification", event => {
// window['plugins'].jPushPlugin.resetBadge();
//map需要new Map,否则无法使用
let content: Map<string, any> = new Map<string, any>();
//android和ios的数据取法不一样,因此if else区分
if(this.isAndroid())
{
content.set('title', event['title']); //推送消息的标题
content.set('message', event['alert']); //推送消息的内容
//推送消息的其它数据,为json键值对
for(let key in event['extras'])
{
content.set(key, event['extras'][key]);
}
}
else
{
content.set('title', event['aps'].title);
content.set('message', event['aps'].alert);
for(let key in event['extras'])
{
content.set(key, event['extras'][key]);
}
}
//如果通知类型不存在,则设置默认值
if( !content.has('type') ) content.set('type',"MESSAGE");
this.events.publish("openNotification", content);
}, false);
//收到通知时会触发该事件,收到通知
document.addEventListener("jpush.receiveNotification", event => {
//map需要new Map,否则接收不到值
let content: Map<string, any> = new Map<string, any>();
//android和ios的数据取法不一样,因此if else区分
if(this.isAndroid())
{
content.set('title', event['title']);
content.set('message', event['alert']);
for(let key in event['extras'])
{
content.set(key, event['extras'][key]);
}
}
else
{
content.set('title', event['aps'].title); //推送消息的标题
content.set('message', event['aps'].alert); //推送消息的内容
//推送消息的其它数据,为json键值对
for(let key in event['extras'])
{
content.set(key, event['extras'][key]);
}
}
//如果通知类型不存在,则设置默认值:message
if( !content.has('type') ) content.set('type', "MESSAGE");
// alert("收到通知时会触发该事件,收到通知");
// alert("jpush.receiveNotification"+ content);
this.events.publish("receiveNotification", content);
}, false);
//收到自定义消息时触发该事件,收到自定义消息
document.addEventListener("jpush.receiveMessage", event => {
let content: Map<string, any> = new Map<string, any>();
//android和ios的数据取法不一样,因此if else区分
if(this.isAndroid)
{
content.set('message', event['message']);
for(let key in event['extras'])
{
content.set(key, event['extras'][key]);
}
}
else
{
content.set('message', event['content']); //推送消息的内容
//推送消息的其它数据,为json键值对
for(let key in event['extras'])
{
content.set(key, event['extras'][key]);
}
}
//如果通知类型不存在,则设置默认值
if( !content.has('type') ) content.set('type', "MESSAGE");
// alert("收到自定义消息时触发该事件,收到自定义消息");
// alert("jpush.receiveMessage"+content);
this.events.publish("receiveMessage", content);
}, false);
}
//设置标签,可设置多个
public setTags(tags: string[] = []): void
{
alert(tags);
if(!this.isMobile()) return;
// if(this.isAndroid())
// tags.push("android");
// if(this.isIos())
// tags.push("ios");
this.jpush.setTags({sequence: Date.now(), tags: tags}).then((res) => {
// alert('极光推送设置标签setTags返回信息'+"tags:"+ tags+"res:"+ res);
}).catch(err => {
// this.logger.error('极光推送设置标签setTags失败', err, {tags: tags});
// alert('极光推送设置标签setTags失败'+"tags:"+ tags+"失败原因:"+err.code);
});
}
//设置别名,建议使用用户ID, userId唯一标识
public setAlias(): void
{
// alert('设置别名');
// if(!this.isMobile()) return;
//alias.push("798428948290"); //用户Id作为别名
//{sequence: 1, alias: alias}
this.jpush.setAlias({sequence: 1, alias: "zhangsan"}).then((res) => {
// alert('极光推送设置别名setAlias返回信息'+"alias: "+alias+"res:"+ res);
}).catch(err => {
this.jpush.getAlias({sequence: 1}).then((r) => {
// alert(r.alias);
})
// this.logger.error('极光推送设置别名setAlias失败', err, {alias: alias});
alert('极光推送设置别名setAlias失败'+"alias: zhangsan失败原因:"+err.code);
});
// Promise();
}
/**
* 是否真机环境
* @return {boolean}
*/
isMobile(): boolean {
return this.platform.is('mobile') && !this.platform.is('mobileweb');
}
/**
* 是否android真机环境
* @return {boolean}
*/
isAndroid(): boolean {
return this.isMobile() && this.platform.is('android');
}
/**
* 是否ios真机环境
* @return {boolean}
*/
isIos(): boolean {
return this.isMobile() && (this.platform.is('ios') || this.platform.is('ipad') || this.platform.is('iphone'));
}
}