ionic3 Jpush极光推送实现

最近一段时间在折腾公司的移动基础框架开发，该框架基于ionic3的框架基础之上进行开发。有一项业务需要用到消息推送，于是采用了第三方提供的推送插件来实现消息的推送.

效果如图所示:

1517637389271.jpg

实现过程如下

第一步：去极光官网注册账号，添加应用获取appkey

第二步：安装ionic cordova插件

1.安装 @jiguang-ionic/jpush 包，适配 ionic-native
npm install --save @jiguang-ionic/jpush
2.安装极光提供的 cordova插件
cordova plugin add Your_Plugin_Path --variable APP_KEY=your_jpush_appkey

第三步：封装极光插件

/**
 *消息推送处理
 *参考来源：https://github.com/jpush/jpush-phonegap-plugin
 * @weijb
 */
import { Injectable } from '@angular/core';
import { NativeService } from "./NativeService";
import { TipsService } from '../providers/TipService';
import { JPush } from '@jiguang-ionic/jpush';
import { Logger } from './Logger';
import {Http, Response, Headers, RequestOptions, URLSearchParams, RequestOptionsArgs, RequestMethod} from '@angular/http';
import { Header } from 'ionic-angular/components/toolbar/toolbar-header';
/**
 * Helper类存放和业务有关的公共方法
 * @description
 */
@Injectable()
export class JpushUtil {
  private registrationId: string;
  sequence: number = 0;
  constructor(private jpush: JPush,private tipsService:TipsService, private nativeService:NativeService,private logger:Logger,private http:Http) {
    
  }
  
  initPush(){
    /**接收消息触发 */
      document.addEventListener('jpush.receiveNotification', (event: any) => {
    this.logger.log(event,'Receive notification');
         //alert('Receive notification: ' + JSON.stringify(event));
      }, false);
    /**打开消息触发 */
      document.addEventListener('jpush.openNotification', (event: any) => {
    this.logger.log(event,'open notification');
      }, false);
    /**接收本地消息 */
      document.addEventListener('jpush.receiveLocalNotification', (event: any) => {
    this.logger.log(event,'receive local notification');
      }, false);
  }
 
    tagResultHandler = function(result) {
      var sequence: number = result.sequence;
      var tags: Array<string> = result.tags == null ? [] : result.tags;
    this.logger.log('Success!' + '\nSequence: ' + sequence + '\nTags: ' + tags.toString(),'标签设置回调');
    };
  
    aliasResultHandler = function(result) {
      var sequence: number = result.sequence;
      var alias: string = result.alias;
    this.logger.log('Success!' + '\nSequence: ' + sequence + '\nAlias: ' + alias,'别名设置回调');
    };
  
    errorHandler = function(err) {
      var sequence: number = err.sequence;
    var code = err.code;
    //console.log('Error!' + '\nSequence: ' + sequence + '\nCode: ' + code,'异常设置回调');
    //this.logger.log('Error!' + '\nSequence: ' + sequence + '\nCode: ' + code,'异常设置回调');
    };
  /**
   * 设备的id
   */
    getRegistrationID() {
      this.jpush.getRegistrationID()
        .then(rId => {
          this.registrationId = rId;
        });
    }
  /**
   * 设置标签
   * tags:['Tag1', 'Tag2']
   */
    setTags(tags:Array<string>) {
      this.jpush.setTags({ sequence: this.sequence++, tags: tags})
        .then(this.tagResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 添加标签
   * tags:['Tag3', 'Tag4']
   */
    addTags(tags:Array<string>) {
      this.jpush.addTags({ sequence: this.sequence++, tags: tags})
        .then(this.tagResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 检测标签状态
   * * @param tag
   */
    checkTagBindState(tag:string) {
      this.jpush.checkTagBindState({ sequence: this.sequence++, tag: tag})
        .then(result => {
          var sequence = result.sequence;
          var tag = result.tag;
      var isBind = result.isBind;
      this.logger.log('Sequence: ' + sequence + '\nTag: ' + tag + '\nIsBind: ' + isBind,'标签状态')
        }).catch(this.errorHandler);
    }
  /**
   * 
   * @param tag 删除标签
   */
    deleteTags(tag:Array<string>) {
      this.jpush.deleteTags({ sequence: this.sequence++, tags: tag})
        .then(this.tagResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 
   * 获取所有标签
   */
    getAllTags() {
      this.jpush.getAllTags({ sequence: this.sequence++ })
        .then(this.tagResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 
   *清空所有标签
   */
    cleanTags() {
      this.jpush.cleanTags({ sequence: this.sequence++ })
        .then(this.tagResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 
   * @param alias 设置别名
   */
    setAlias(alias:string) {
      this.jpush.setAlias({ sequence:this.sequence?this.sequence++:1, alias: alias })
        .then(this.aliasResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 
   * 获取所有别名
   */
    getAlias() {
      this.jpush.getAlias({ sequence: this.sequence++ })
        .then(this.aliasResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 
   * 删除所有别名
   */
    deleteAlias() {
      this.jpush.deleteAlias({ sequence: this.sequence++ })
        .then(this.aliasResultHandler)
        .catch(this.errorHandler);
    }
  /**
   * 添加本地消息
   */
    addLocalNotification() {
      if (this.nativeService.isAndroid()) {
        this.jpush.addLocalNotification(0, 'Hello JPush', 'JPush', 1, 5000);
      } else {
        this.jpush.addLocalNotificationForIOS(5, 'Hello JPush', 1, 'localNoti1');
      }
  }
 
}

第三步：在app.module.ts文件中引入jpush插件

import { JPush } from '@jiguang-ionic/jpush';
import {JpushUtil} from '../providers/JpushUtil';
 providers: [
JPush ,
JpushUtil
]
```.
第四部:极光推送初始调用，一般场景下，在登录之后设置
```js
import {JpushUtil} from '../providers/JpushUtil';
import { JPush } from '@jiguang-ionic/jpush';
       /**极光推送开启 */
        this.jpush.init();//插件初始化
        this.jpush.setDebugMode(true);
       /*消息推送配置**/
        this.jpushUtil.initPush();//监听初始化
        this.jpushUtil.setAlias(user.userCode);    //设置别名