文档地址: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')); } }