ionic3中使用极光推送

一、极光推送基于cordova插件的，所以安装cordova插件

命令：npm install -g cordova

查看cordova是否安装成功 cordova -v （-v是 --version 的缩写，代表检测版本）

image

二、按照极光官网提供安装，有三种方式

1、 通过 Cordova Plugins 安装，要求 Cordova CLI 5.0+：

cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey

2、直接通过 url 安装：

cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable APP_KEY=your_jpush_appkey

3、下载到本地安装：

cordova plugin add Your_Plugin_Path --variable APP_KEY=your_jpush_appkey

** your_jpush_appkey 是指在极光推送官网拿到的APP_KEY的值**

image

配置推送设置

image

1、安卓的配置（比较简单）

打开本地项目中的config.xml

image

image

安卓配置的应用包名和该文件里的包名保持一致

2、ios的配置

需要生成两个证书（生产证书和开发证书）

教程：https://www.jianshu.com/p/14df362a33da

三、安装 @jiguang-ionic/jpush 包

命令：npm install --save @jiguang-ionic/jpush

安装 @jiguang-ionic/jpush 以后，在 app.module.ts 文件中，导入，然后添加到 服务（providers）中。

 import  {  JPush  }  from   '@jiguang-ionic/jpush'; 
 ...
 providers:[ 
    ....
 JPush,   
    ....
 ]

四、使用极光推送

极光推送事件：

接收消息触发 jpush.receiveNotification

打开消息触发 jpush.openNotification

接收本地消息 jpush.receiveLocalNotification

五、代码示范

import { Injectable } from '@angular/core';
import { NativeService } from './NativeService';
import { JPush } from '@jiguang-ionic/jpush';
import {Observable} from "rxjs/Observable";

/**
 * Helper类存放和业务有关的公共方法
 * @description
 */
@Injectable()
export class JpushProvider {

  constructor(private jPush: JPush,
              private nativeService: NativeService,
            ) {
  }


  /**
   * 从文件对象数组中找出指定id对应的文件对象
   * @param fileList 文件对象数组
   * @param idList id数组
   */
  static findFileListById(fileList, ids) {
    if (!ids || ids.length === 0) {
      return [];
    }
    const newFileList = [];
    for (const file of fileList) {
      for (const id of ids) {
        if (file.id == id) {
          newFileList.push(file);
        }
      }
    }
    return newFileList;
  }

  /**
   * 极光推送
   */
  initJpush() {
    if (!this.nativeService.isMobile()) {
      return;
    }
    this.jPush.init();
    this.jPush.setDebugMode(true);
    this.jPushAddEventListener();
  }

  getRegistrationID(): Promise {
    return this.jPush.getRegistrationID();
  }

  // 详细文档 https://github.com/jpush/jpush-phonegap-plugin/blob/master/doc/Common_detail_api.md
  private jPushAddEventListener() {
    this.jPush.getUserNotificationSettings().then(result => {
      if (result == 0) {
        console.log('jpush-系统设置中已关闭应用推送');
      } else if (result > 0) {
        console.log('jpush-系统设置中打开了应用推送');
      }
    });
    // 点击通知进入应用程序时会触发的事件
    // document.addEventListener('jpush.openNotification', event => {
    //   this.setIosIconBadgeNumber(0);
    //   const content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
    //   // this.events.publish('jpush.openNotification', content);
    // }, false);

    // // 收到通知时会触发该事件
    // document.addEventListener('jpush.receiveNotification', event => {
    //   const content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
    //   console.log('jpush.receiveNotification' + content);
    // }, false);

    // // 收到自定义消息时触发这个事件
    // document.addEventListener('jpush.receiveMessage', event => {
    //   const message = this.nativeService.isIos() ? event['content'] : event['message'];
    //   console.log('jpush.receiveMessage' + message);
    // }, false);

  }
  // 点击通知进入应用程序时会触发的事件
  openNotification(): Observable{
    return new Observable(observer => {
      document.addEventListener('jpush.openNotification', (event: any) => {
        observer.next(event);  
      }, false)
    });
    
  }

 // 收到通知时会触发该事件
  receiveNotification(): Observable{
    let content;
    return new Observable(observer => {
      document.addEventListener('jpush.receiveNotification', (event: any) => {
        if (this.nativeService.isIos()) {
          content = event.aps.alert;
        } else { 
          content = event.alert;
        }  
        this.jPush.setBadge(0);
        this.jPush.setApplicationIconBadgeNumber(0);
      }, false);
      observer.next(content);
    });
  }
// 收到自定义消息时触发这个事件
  receiveMessage() {
    let content;
    return new Observable(observer => {
      document.addEventListener('jpush.receiveMessage', event => {
        content = this.nativeService.isIos() ? event['content'] : event['message'];
        console.log('jpush.receiveMessage' + content);
      }, false);
      observer.next(content);
    });
  }

  /* tslint:disable */
  setAlias(userId) {
    this.jPush.setAlias({sequence: 1, alias: userId}).then(result => {
      console.log('jpush-设置别名成功:');
      console.log(JSON.stringify(result));
    }, error => {
     console.log(JSON.stringify(error))
    })
  }

  deleteAlias() {
    if (!this.nativeService.isMobile()) {
      return;
    }
    this.jPush.deleteAlias({sequence: 2}).then(result => {
      console.log('jpush-删除别名成功:');
      console.log(result);
    }, error => {
      console.log('jpush-设删除别名失败:', error);
    })
  }

  setTags(tags: Array = []) {
    if (!this.nativeService.isMobile()) {
      return;
    }
    if (this.nativeService.isAndroid()) {
      tags.push('android');
    }
    if (this.nativeService.isIos()) {
      tags.push('ios');
    }
    this.jPush.setTags({sequence: 3, tags}).then(result => {
      console.log('jpush-设置标签成功:');
      console.log(result);
    }, error => {
      console.log('jpush-设置标签失败:', error);
    })
  }

  deleteTags(tags: Array = []) {
    if (!this.nativeService.isMobile()) {
      return;
    }
    this.jPush.deleteTags({sequence: 4, tags}).then(result => {
      console.log('jpush-删除标签成功:');
      console.log(result);
    }, error => {
      console.log('jpush-删除标签失败:', error);
    })
  }

  // 设置ios应用角标数量
  setIosIconBadgeNumber(badgeNumber) {
    if (this.nativeService.isIos()) {
      this.jPush.setBadge(badgeNumber); // 上传badge值到jPush服务器
      this.jPush.setApplicationIconBadgeNumber(badgeNumber); // 设置应用badge值
    }
  }

  /* tslint:enable */
}

四、极光推送测试

1552637759(1).png

1552637782(1).png