美文网首页我的 ionicionic开发
ionic3-极光推送（JPush）

ionic3-极光推送（JPush）

作者: JoyoDuan | 来源:发表于2017-11-09 09:34 被阅读1455次

    说明

    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
    • 点击“创建我的应用”得到Appkey和Master 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-plugin和cordova-plugin-jcore两个插件
    • 安装客户端（ionic2项目中）@jiguang-ionic/jpush插件
      npm install @jiguang-ionic/jpush --save

    使用极光推送

    • 客户端（ionic2/3应用）
      如图：


      初始化极光推送.png

    ps：在app.component.ts的platform.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的客户端和服务端的基本用法，具体的可以跟我相互交流。

    相关文章

      网友评论

        本文标题：ionic3-极光推送（JPush）

        本文链接：https://www.haomeiwen.com/subject/pjtpmxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        我的 ionic

        ionic开发

        关于我们|服务条款|联系我们|ionic3-极光推送（JPush）|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！