ionic3-极光推送(JPush)

说明

2018-02-26修改说明

  1. 由于ionic3-jpush插件在设置别名时出错,所以修改ionic3-jpush插件为@jiguang-ionic/jpush插件

2017-11-14修改说明

  1. 2017-11-08官方phonegap插件jpush-phonegap-plugin更新了Api,请参见

  2. ionic3-jpush由 1.1.0 升级为 1.2.0 需要jpush-phonegap-plugin 版本 >= 3.2.4。

  3. 以下Api参数发生变化
    Alias API

    • setAlias
    • deleteAlias
    • getAlias

    Tag API

    • setTags
    • addTags
    • deleteTags
    • cleanTags
    • getAllTags
    • checkTagBindState

参考

准备

  • 极光开发者服务创建应用
    如图:
    极光开发者服务-创建应用

    极光开发者服务-创建应用-step2
  • 点击“创建我的应用”得到AppkeyMaster Secret(Appkey用于安装jpush插件,Master Secret用于后台服务器接入jpush服务)
    如图:
    Appkey & Master Secret
  • 在ionic2项目中找到config.xml文件中找到应用id(应用包名)
    如图:
    应用包名
  • 将“应用包名”填到“极光开发者服务-推送设置”的“应用包名”中
    如图:


    推送设置-应用包名

安装插件

  • 安装客户端(ionic2项目中)jpush-phonegap-plugin集成插件
    ionic cordova plugin add jpush-phonegap-plugin --variable APP_KEY=极光官网得到的Appkey
    ps:命令安装过程会安装jpush-phonegap-plugincordova-plugin-jcore两个插件
  • 安装客户端(ionic2项目中)@jiguang-ionic/jpush插件
    npm install @jiguang-ionic/jpush --save

使用极光推送

  • 客户端(ionic2/3应用)
    如图:


    初始化极光推送.png

ps:在app.component.tsplatform.ready().then({})
中调用this.jpushService.initJPush()初始化极光推送
如图:

初始化极光推送.png

我的JPushService.ts所有代码:

import { Injectable } from '@angular/core';
import { Events } from "ionic-angular";
import { JPush } from "@jiguang-ionic/jpush"; //npm install @jiguang-ionic/jpush --save

//自定义服务
import { NativeService } from "./NativeService";
import { Logger } from "./Logger";
import { Utils } from "./Utils";
import { NOTIFY_TYPE } from './Constants';
import { GlobalData } from "./GlobalData";

/**
 * JPush极光推送服务类
 * cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey
 * npm install @jiguang-ionic/jpush --save
 * @export
 * @class JPushService
 * Add by JoyoDuan on 2017-10-27
 */
@Injectable()
export class JPushService {

  //是否是真机(手机)
  private isMobile: boolean;
  //是否是android
  private isAndroid: boolean;
  //是否是ios
  private isIos: boolean;

  constructor(private events: Events, private jpush: JPush, private nativeService: NativeService, private logger: Logger,
    private globalData: GlobalData){

    this.isMobile = this.nativeService.isMobile();
    this.isAndroid = this.nativeService.isAndroid();
    this.isIos = this.nativeService.isIos();

  }


  /**************************************** 极光推送 Start ************************************************ */
  /**
   * 初始化极光推送
   * @returns {void}
   * @memberof Helper
   */
  public initJPush(): void
  {
    if(!this.isMobile) return;
    this.jpush.init().then(result => {
      //初始化时设置标签(android、ios)
      // this.setTags();
      this.logger.info("极光推送初始化", {JPushResult: result});
    }).catch(error => {
      this.logger.error("极光推送初始化失败", error);
    });
    //极光推送事件监听
    this.addEventListener();
  }


  /**
   * 极光推送增加监听事件
   * @private
   * @memberof Helper
   */
  private addEventListener(): void
  {
    this.jpush.getUserNotificationSettings().then(result => {
      if(result == 0)
        this.logger.info("系统设置中已关闭应用推送", {result: result});
      if(result > 0)
        this.logger.info("系统设置中打开了应用推送", {result: result});
    });

    //点击通知进入应用程序时会触发的事件,点击通知进入程序
    document.addEventListener("jpush.openNotification", event => {

      //  window['plugins'].jPushPlugin.resetBadge();
      //map需要new Map,否则无法使用
      let content: Map<string, any> = new Map<string, any>();

      //android和ios的数据取法不一样,因此if else区分
      if(this.isAndroid)
      {
        content.set('title', event['title']); //推送消息的标题
        content.set('message', event['alert']); //推送消息的内容

        //推送消息的其它数据,为json键值对
        for(let key in event['extras'])
        {
          content.set(key, event['extras'][key]);
        }
      }
      else
      {
        content.set('title', event['aps'].title);
        content.set('message', event['aps'].alert);

        for(let key in event['extras'])
        {
          content.set(key, event['extras'][key]);
        }
      }
      //如果通知类型不存在,则设置默认值
      if( !content.has('type') || Utils.isEmptyStr(content.get('type')) ) content.set('type', NOTIFY_TYPE.MESSAGE);

      this.logger.info("jpush.openNotification", {content: content});

      this.events.publish("openNotification", content);
    }, false);

    //收到通知时会触发该事件,收到通知
    document.addEventListener("jpush.receiveNotification", event => {

      //map需要new Map,否则接收不到值
      let content: Map<string, any> = new Map<string, any>();
      //android和ios的数据取法不一样,因此if else区分
      if(this.isAndroid)
      {
        content.set('title', event['title']);
        content.set('message', event['alert']);
        for(let key in event['extras'])
        {
          content.set(key, event['extras'][key]);
        }
      }
      else
      {
        content.set('title', event['aps'].title); //推送消息的标题
        content.set('message', event['aps'].alert); //推送消息的内容

        //推送消息的其它数据,为json键值对
        for(let key in event['extras'])
        {
          content.set(key, event['extras'][key]);
        }
      }
      //如果通知类型不存在,则设置默认值:message
      if( !content.has('type') || Utils.isEmptyStr(content.get('type')) ) content.set('type', NOTIFY_TYPE.MESSAGE);

      this.logger.info("jpush.receiveNotification", {content: content});
      this.events.publish("receiveNotification", content);
    }, false);

    //收到自定义消息时触发该事件,收到自定义消息
    document.addEventListener("jpush.receiveMessage", event => {

      let content: Map<string, any> = new Map<string, any>();
      //android和ios的数据取法不一样,因此if else区分
      if(this.isAndroid)
      {
        content.set('message', event['message']);
        for(let key in event['extras'])
        {
          content.set(key, event['extras'][key]);
        }
      }
      else
      {
        content.set('message', event['content']); //推送消息的内容

        //推送消息的其它数据,为json键值对
        for(let key in event['extras'])
        {
          content.set(key, event['extras'][key]);
        }
      }
      //如果通知类型不存在,则设置默认值
      if( !content.has('type') || Utils.isEmptyStr(content.get('type')) ) content.set('type', NOTIFY_TYPE.MESSAGE);

      this.logger.info("jpush.receiveMessage", {content: content});
      this.events.publish("receiveMessage", content);
    }, false);

    //设置标签/别名时触发,设置标签/别名,2017年10月份后没有setTagsWithAlias方法
    // document.addEventListener("jpush.setTagsWithAlias", event => {
    //   let result = "result code:" + event['resultCode'] + " ";
    //   result += "tags:" + event['tags'] + " ";
    //   result += "alias:" + event['alias'] + " ";

    //   this.logger.info("onTagsWithAlias", {result: result});
    //   this.events.publish("setTagsWithAlias", result);
    // }, false);
  }


  //设置标签,可设置多个
  public setTags(tags: string[] = []): void
  {
    if(!this.isMobile) return;
    if(this.isAndroid)
      tags.push("android");
    if(this.isIos)
      tags.push("ios");
    this.jpush.setTags({sequence: Date.now(), tags: tags}).then((res) => {
      this.logger.info('极光推送设置标签setTags返回信息', {tags: tags, res: res});
    }).catch(err => {
      this.logger.error('极光推送设置标签setTags失败', err, {tags: tags});
    });
  }


  //设置别名,建议使用用户ID, userId唯一标识
  public setAlias(alias: string[] = []): void
  {
    if(!this.isMobile) return;

    alias.push(this.globalData.userId);   //用户Id作为别名

    this.jpush.setAlias({sequence: Date.now(), alias: alias}).then((res) => {
      this.logger.info('极光推送设置别名setAlias返回信息', {alias: alias, res: res});
    }).catch(err => {
      this.logger.error('极光推送设置别名setAlias失败', err, {alias: alias});
    });
  }


  //设置标签和别名,在ionioc3-jpush 1.2.0中删除了setTagsWithAlias()方法
  // public setTagsWithAlias(tags: string[] = [], alias: string[] = []): void
  // {
  //   if(!this.isMobile) return;
  //   if(this.isAndroid)
  //     tags.push("android");
  //   if(this.isIos)
  //     tags.push("ios");
  //   if(!alias || Utils.isEmptyStr(alias))
  //     alias = this.globalData.userId; //用户Id作为别名
  //   this.logger.info("极光推送设置标签和别名,setTagsWithAlias", {tags: tags, alias: alias});
  //   this.jpush.setTagsWithAlias(tags, alias);
  // }
  /**************************************** 极光推送 End ************************************************ */
}
  • 服务端推送JPush服务(我这里用的是JAVA)
  1. 参考极光文档
  2. jar包方式,请到jpush-api-java-client下载jar包。
  3. maven方式,请在maven的pom.xml文件中添加JPush的依赖包
    如图:


    maven-jpush.png

    代码:

<dependency>
        <groupId>cn.jpush.api</groupId>
        <artifactId>jpush-client</artifactId>
        <version>3.3.2</version>
    </dependency>
     <dependency>
        <groupId>cn.jpush.api</groupId>
        <artifactId>jiguang-common</artifactId>
        <version>1.0.8</version>
    </dependency>
    <dependency>
        <groupId>io.netty</groupId>
        <artifactId>netty-all</artifactId>
        <version>4.1.6.Final</version>
        <scope>compile</scope>
    </dependency>
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.3</version>
    </dependency>
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>slf4j-api</artifactId>
        <version>1.7.7</version>
    </dependency>

简单示例如图:


JAVA-JPush

代码:

    @RequestMapping(value="notifyInfo")
    @ResponseBody
    public String notifyInfo(String type)
    {
        JPushClient jpushClient = new JPushClient(MASTER_SECRET, APP_KEY, null, ClientConfig.getInstance());
        
        Map<String, String> extras = new HashMap<String, String>();
        extras.put("type", type);
        PushPayload payload = PushPayload.newBuilder()
                    .setPlatform(Platform.android())
                    .setAudience(Audience.all())
                    .setNotification(Notification.android("JoyoDuan!这是JPush推送测试消息!", "消息通知", extras))
                    .build();
        try {
            PushResult result = jpushClient.sendPush(payload);
            System.out.println(extras);
        } catch (APIConnectionException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (APIRequestException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "notifySuccess";
    }

该博文只是简单的写出了JPush的客户端和服务端的基本用法,具体的可以跟我相互交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容