基于Ionic3和极光推送实现推送功能

我们的项目里使用极光推送来进行推送消息的接收。

1：在极光开发者服务中心配置应用

如果新建一个应用，会自动生成AppKey和Master Secret：

然后进行推送设置，否则无法接收推送。

Android：

IOS：

注意这里iOS的APNS证书文件需要到苹果开发者中心进行配置，生产环境是用于发布之后的正式环境，开发环境是用于测试推送环境的。

极光官网文档有关于如何配置iOS证书的非常详细步骤的介绍，按照这篇文章一步步来，不会出现什么问题。

配置IOS推送证书

如果Android和iOS的推送设置成功，可以在开发者服务中心进行测试

如果没有设置成功，那么目标平台的几个按钮就相应不可用。如果客户端那边连接成功，这里发送通知就可以收到了。

２：客户端连接极光服务器

极光官方维护的客户端插件包括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访问的。所以如果你的测试手机如果接收不到推送，看看是不是网络问题。