我的 ionicIonic之路ionic

ionic2实战-极光推送

2017-05-09  本文已影响4201人  昵称已被使用_

传送门

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

准备


安装插件

1.使用命令安装

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

命令安装插件过程如下图,会安装jpush-phonegap-plugin和cordova-plugin-jcore两个插件,这两个插件大概有19M,如果网络慢就使用本地安装

2.本地安装

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

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

项目中集成推送功能

最新代码可参考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);
  }

}

在获取到用户信息或用户重新登录时.你可能需要调用设置别名方法.
this.helper.setAlias(userInfo.id);
别名只能设置一个,一般设置用户的唯一标识,如用户id或用户登录名.如我设置的是用户id,这样就可以根据用户id推送消息
别名不能是number类型,如设置别名为1,在ios设置失败.在android上可以的.所以最好统一设置.setAlias(String(1));或.setAlias('' + 1);.这个bug可能以后会修复

点击推送跳转到指定页面


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

测试

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

关于ios推送

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

推送证书

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

ios打包

ionic platform rm ios
ionic platform add ios
ionic build ios

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


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

最后

上一篇下一篇

猜你喜欢

热点阅读