傳送門

極光官網(wǎng)
極光開發(fā)者控制臺
jpush-phonegap-plugin
jpush 通用API
jpush Android API
jpush Ios API

準備

• 注冊并登錄極光官網(wǎng)
• 創(chuàng)建一個應用

• 生成AppKey
  AppKey一會用來安裝插件

  
  

• 推送設置
  android設置,填寫應用包名點擊提交.(包名是app根目錄下congfig.xml中的id值)
  ios設置本文后面會講

  
  

安裝插件

1.使用命令安裝

cordova plugin add jpush-phonegap-plugin --variable APP_KEY=你的AppKey

命令安裝插件過程如下圖,會安裝jpush-phonegap-plugin和cordova-plugin-jcore兩個插件,這兩個插件大概有19M,如果網(wǎng)絡慢就使用本地安裝

2.本地安裝

• 去github上下載cordova-plugin-jcore和jpush-phonegap-plugin到本地
  

  
  

• 下載后解壓到某目錄,如我解壓到D盤根目錄,安裝過程如下圖

  
  

插件安裝完成,依次執(zhí)行下面命令,build app看插件是否報錯

 cordova platform rm android
 cordova platform add android
 ionic cordova build android

項目中集成推送功能

• 如下圖,創(chuàng)建一個類并添加初始化極光推送代碼.我創(chuàng)建的類名叫Helper.ts你隨意
  
• Helper.ts完整代碼

最新代碼可參考Helper.ts

/**
 * Created by yanxiaojun617@163.com on 05-09.
 */
import {Injectable} from '@angular/core';
import {NativeService} from "./NativeService";

/**
 * Helper類存放和業(yè)務有關的公共方法
 * @description
 */
@Injectable()
export class Helper {

  constructor(private nativeService: NativeService) {
  }

  initJpush() {
    if (!this.nativeService.isMobile()) {
      return;
    }
    window['plugins'].jPushPlugin.init();
    if (this.nativeService.isIos()) {
      window['plugins'].jPushPlugin.setDebugModeFromIos();
      window['plugins'].jPushPlugin.setApplicationIconBadgeNumber(0);
    } else {
      window['plugins'].jPushPlugin.setDebugMode(true);
      window['plugins'].jPushPlugin.setStatisticsOpen(true);
    }
    this.jPushAddEventListener();
  }

  private jPushAddEventListener() {
    //判斷系統(tǒng)設置中是否允許當前應用推送
    window['plugins'].jPushPlugin.getUserNotificationSettings(result => {
      if (result == 0) {
        console.log('系統(tǒng)設置中已關閉應用推送');
      } else if (result > 0) {
        console.log('系統(tǒng)設置中打開了應用推送');
      }
    });

    //點擊通知進入應用程序時會觸發(fā)的事件
    document.addEventListener("jpush.openNotification", event => {
      let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
      console.log("jpush.openNotification" + content);
    }, false);

    //收到通知時會觸發(fā)該事件
    document.addEventListener("jpush.receiveNotification", event => {
      let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
      console.log("jpush.receiveNotification" + content);
    }, false);

    //收到自定義消息時觸發(fā)這個事件
    document.addEventListener("jpush.receiveMessage", event => {
      let message = this.nativeService.isIos() ? event['content'] : event['message'];
      console.log("jpush.receiveMessage" + message);
    }, false);


    //設置標簽/別名回調函數(shù)
    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);

  }

  //設置標簽
  public setTags() {
    if (!this.nativeService.isMobile()) {
      return;
    }
    let tags = this.nativeService.isAndroid() ? ['android'] : ['ios'];
    console.log('設置setTags:' + tags);
    window['plugins'].jPushPlugin.setTags(tags);
  }

  //設置別名,一個用戶只有一個別名
  public setAlias(userId) {
    if (!this.nativeService.isMobile()) {
      return;
    }
    console.log('設置setAlias:' + userId);
    //ios設置setAlias有bug,值必須為string類型,不能是number類型
    window['plugins'].jPushPlugin.setAlias('' + userId);
  }

}

• 注意:極光推送最新版設置別名方法有所改變.本文使用的方法是舊版.詳情請看:https://github.com/jpush/jpush-phonegap-plugin/blob/master/doc/Common_detail_api.md#setalias

• 如下圖,在app.component.ts調用初始化推送方法(點擊圖片放大看)

  
  

在獲取到用戶信息或用戶重新登錄時.你可能需要調用設置別名方法.
this.helper.setAlias(userInfo.id);
別名只能設置一個,一般設置用戶的唯一標識,如用戶id或用戶登錄名.如我設置的是用戶id,這樣就可以根據(jù)用戶id推送消息
別名不能是number類型,如設置別名為1,在ios設置失敗.在android上可以的.所以最好統(tǒng)一設置.setAlias(String(1));或.setAlias('' + 1);.這個bug可能以后會修復

點擊推送跳轉到指定頁面

• 在jpush.openNotification事件中發(fā)布事件

• 在app.component.ts訂閱事件.完整代碼可參考app.component.ts中的jpushOpenNotification()

如果你可以跳轉到指定頁面,但是android返回按鈕處理事件出現(xiàn)bug.請參考app.component.ts中的registerBackButtonAction()

• 如果你的app沒有分tab

測試

• 安裝了推送插件后,還沒有執(zhí)行過ionic platform rm android和ionic platform add android,請執(zhí)行
• 然后執(zhí)行ionic build android生成apk發(fā)送到手機上安裝并打開app

如果推送了消息,但是app沒啟動,這時候是收不到消息的.當app啟動會立即收到消息

• 進入極光推送控制臺,填寫推送內容,點擊立即推送,看app是否收到.
  

關于ios推送

ios極光推送插件的安裝和使用方式和android一樣
如果android端推送功能已經ok,那推送插件和代碼應該不用改動了.下面說說ios推送的注意事項
如果對ios證書和ios打包還不夠了解,請先看這里

推送證書

ios推送需要申請推送證書,并把推送證書添加到Mac的鑰匙串中,然后從鑰匙串中導出證書并上傳到極光推送設置中,過程如下

• 蘋果開發(fā)者官網(wǎng)申請推送證書

  
  

• 把推送證書添加到鑰匙串

  
  

• 從鑰匙串中導出推送證書并上傳到極光推送ios設置中

  
  
  
  

ios打包

• 依次執(zhí)行下面命令

ionic platform rm ios
ionic platform add ios
ionic build ios

• 注意ionic build ios會報一個i386錯誤,這個錯誤不用管,極光開發(fā)人員說是ios模擬器問題.
  

官網(wǎng)給的解決方法是執(zhí)行ionic platform update ios,如下圖

但是當又執(zhí)行了ionic platform rm ios和ionic platform add ios,然后重新build的時候,還是會有這個錯誤.所以不用管它繼續(xù)打包

• 用xcode打開app,設置app的打包證書.打開推送功能

  
  

• 剩下的就是熟練的打包流程

• 測試方法和上面gif圖演示的一樣,只是要選擇ios開發(fā)環(huán)境或ios生產環(huán)境

  
  

最后

• 更完整代碼在github
• 推送消息一般是由后臺代碼推送.
  如后臺檢測用戶幾天未登錄則推送一條消息；web端給使用app的工作人員安排了一個工單要推送一條消息
• 所以要集成極光推送后臺服務
  去極光官方github搜索你的后臺開發(fā)語言,我的是java,然后看文檔集成到你的后臺代碼中.....