基於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訪問的。所以如果你的測試手機如果接收不到推送，看看是不是網絡問題。