传送门

极光官网
极光开发者控制台
jpush-phonegap-plugin
jpush 通用API
jpush Android API
jpush Ios API

准备

• 注册并登录极光官网
• 创建一个应用

• 生成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,如果网络慢就使用本地安装

2.本地安装

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

  
  

• 下载后解压到某目录,如我解压到D盘根目录,安装过程如下图

  
  

插件安装完成,依次执行下面命令,build app看插件是否报错

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

项目中集成推送功能

• 如下图,创建一个类并添加初始化极光推送代码.我创建的类名叫Helper.ts你随意
  
• Helper.ts完整代码

最新代码可参考Helper.ts

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

/**
 * Helper类存放和业务有关的公共方法
 * @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() {
    //判断系统设置中是否允许当前应用推送
    window['plugins'].jPushPlugin.getUserNotificationSettings(result => {
      if (result == 0) {
        console.log('系统设置中已关闭应用推送');
      } else if (result > 0) {
        console.log('系统设置中打开了应用推送');
      }
    });

    //点击通知进入应用程序时会触发的事件
    document.addEventListener("jpush.openNotification", event => {
      let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
      console.log("jpush.openNotification" + content);
    }, 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);

  }

  //设置标签
  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,这样就可以根据用户id推送消息
别名不能是number类型,如设置别名为1,在ios设置失败.在android上可以的.所以最好统一设置.setAlias(String(1));或.setAlias('' + 1);.这个bug可能以后会修复

点击推送跳转到指定页面

• 在jpush.openNotification事件中发布事件

• 在app.component.ts订阅事件.完整代码可参考app.component.ts中的jpushOpenNotification()

如果你可以跳转到指定页面,但是android返回按钮处理事件出现bug.请参考app.component.ts中的registerBackButtonAction()

• 如果你的app没有分tab

测试

• 安装了推送插件后,还没有执行过ionic platform rm android和ionic platform add android,请执行
• 然后执行ionic build android生成apk发送到手机上安装并打开app

如果推送了消息,但是app没启动,这时候是收不到消息的.当app启动会立即收到消息

• 进入极光推送控制台,填写推送内容,点击立即推送,看app是否收到.
  

关于ios推送

ios极光推送插件的安装和使用方式和android一样
如果android端推送功能已经ok,那推送插件和代码应该不用改动了.下面说说ios推送的注意事项
如果对ios证书和ios打包还不够了解,请先看这里

推送证书

ios推送需要申请推送证书,并把推送证书添加到Mac的钥匙串中,然后从钥匙串中导出证书并上传到极光推送设置中,过程如下

• 苹果开发者官网申请推送证书

  
  

• 把推送证书添加到钥匙串

  
  

• 从钥匙串中导出推送证书并上传到极光推送ios设置中

  
  
  
  

ios打包

• 依次执行下面命令

ionic platform rm ios
ionic platform add ios
ionic build ios

• 注意ionic build ios会报一个i386错误,这个错误不用管,极光开发人员说是ios模拟器问题.
  

官网给的解决方法是执行ionic platform update ios,如下图

但是当又执行了ionic platform rm ios和ionic platform add ios,然后重新build的时候,还是会有这个错误.所以不用管它继续打包

• 用xcode打开app,设置app的打包证书.打开推送功能

  
  

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

• 测试方法和上面gif图演示的一样,只是要选择ios开发环境或ios生产环境

  
  

最后

• 更完整代码在github
• 推送消息一般是由后台代码推送.
  如后台检测用户几天未登录则推送一条消息；web端给使用app的工作人员安排了一个工单要推送一条消息
• 所以要集成极光推送后台服务
  去极光官方github搜索你的后台开发语言,我的是java,然后看文档集成到你的后台代码中.....