Ionic5整合极光推送JPush ( 简单 )

项目初始化

1. 安装项目依赖：

# 安装cordova插件
ionic cordova plugin add jpush-phonegap-plugin --variable APP_KEY="极光的appKey"
# 安装npm依赖
npm install --save @jiguang-ionic/jpush

2. 然后在app.module.ts中注册极光服务：(引入JPush后StatusBar、SplashScreen可能报错，不影响程序运行不用理会)

import { JPush } from '@jiguang-ionic/jpush/ngx';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        JPush  // 这里注册极光服务
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3. 在app.component.ts中对极光服务进行初始化操作

import { JPush } from '@jiguang-ionic/jpush/ngx';

export class AppComponent {
    constructor(
            private platform: Platform,
            private splashScreen: SplashScreen,
            private statusBar: StatusBar,
            private jpush: JPush ) {
        this.initializeApp();
        // 初始化极光服务
        this.initJPush();
    }

    initializeApp() { ... }

    initJPush() {   // 初始化极光服务
        this.jpush.setDebugMode(true);
        this.jpush.init();
    }
}

4. 这里需要留意，config.xml中的包名要与极光中创建应用的包名一致

简单使用介绍

极光推送消息的时候可以设置所有用户接收 ( 广播类型 )，也可以根据设备类型来决定接收消息的用户 ( 例如只有安卓或者IOS用户才能接收 )

除开设备类型之外极光还可以为客户设置标识，通过标识过滤来达到部分消息推送的目的，通过极光可以给客户设置 TAG 标签以及Alias 别名两种类型的标识，他们具体体现为 ：

类型	名称	数量限制	设备限制
TAG	标签	每个设备允许设置多个标签	可以多个设备使用同一个标签
Alias	别名	每个设备仅允许设置一个别名	最多十个设备使用同一个别名

通过之前安装的两个依赖可以实现操作设备的 TAG 标签和 Alias 别名，例如：

import { JPush } from '@jiguang-ionic/jpush/ngx';

export class HomePage {

    private sequence: number = 1;

    constructor(private jpush: JPush) {}

    // 调用函数添加设备标签
    clickBtn() {
        // sequence：目前用不上这个属性，给一个自增变量就够了
        // tags: 标签名称，这里需要注意用[]将它封装为数组才能用
        let data = { sequence: this.sequence++, tags: ["VIP2"] };
        this.jpush.addTags(data).then(res=>{
            console.log("成功添加TAG", res);
        }).catch(err=>{
            console.error("添加TAG失败！", err);
        });
    }

}

然后在极光网站就可以通过TAG标签来指定接收消息的用户了：

封装极光操作服务

关于极光的操作比较多，例如添加标签，获取标签，删除标签以及关于别名的操作，这里为了简化开发就封装了极光的 JPush 工具类服务，封装了常用的一些方法，随时补充

因为极光推送的初始化时间较长，且在初始化期间设置标签别名时会失败，我找了很久没有找到关于初始化成功之后操作的事件，所以这里定义了一个重试次数的参数retryCount，在初始化时设置失败会自动重试，一般在重试第二次的时候极光就会初始化完成

import { Injectable } from '@angular/core';
import { JPush } from '@jiguang-ionic/jpush/ngx';

@Injectable({
    providedIn: 'root'
})
export class JPushService {

    private sequence: number = 1;   // 一个标识，具体效果未知
    private retryCount: number = 3; // 重试次数

    constructor( private jpush: JPush ) { }

    // 获取当前所有Tag标签
    getTags(retry: number = 1){
        this.jpush.getAllTags(this.getTagOptions()).then(res=>{
            console.log("获取TAG列表：", res.tags);
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`获取TAG列表失败，重试中(${retry}/${this.retryCount})...`);
                this.getTags(retry+1);
            } else console.error("获取TAG列表失败！");
        });
    }
    // 添加Tag标签
    addTag(tag: string, retry: number = 1){
        this.jpush.addTags(this.getTagOptions([tag])).then(res=>{
            console.log("成功添加TAG：", tag);
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`添加TAG失败，重试中(${retry}/${this.retryCount})...`);
                this.addTag(tag, retry+1);
            } else console.error("添加TAG失败！");
        });
    }
    // 重新修改Tag标签列表
    setTags(tags: string[], retry: number = 1){
        this.jpush.setTags(this.getTagOptions(tags)).then(res=>{
            console.log("成功修改TAG：", res);
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`修改TAG失败，重试中(${retry}/${this.retryCount})...`);
                this.setTags(tags, retry+1);
            } else console.error("修改TAG失败！");
        })
    }
    // 删除某个Tag标签
    deleteTag(tag: string, retry: number = 1){
        this.jpush.deleteTags(this.getTagOptions([tag])).then(res=>{
            console.log("成功删除TAG：", tag);
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`删除TAG失败，重试中(${retry}/${this.retryCount})...`);
                this.deleteTag(tag, retry+1);
            } else console.error("删除TAG失败！");
        });
    }
    // 清空所有Tag标签
    clearTags(retry: number = 1){
        this.jpush.cleanTags(this.getTagOptions()).then(()=>{
            console.log("Tag清空成功！");
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`Tab清空失败，重试中(${retry}/${this.retryCount})...`);
                this.clearTags(retry+1);
            } else console.error("Tab清空失败！");
        });
    }

    // 获取设备别名
    getAlias(retry: number = 1){
        this.jpush.getAlias({ sequence: this.sequence++ }).then(res=>{
            console.log("获取设备别名：", res.alias);
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`获取别名失败，重试中(${retry}/${this.retryCount})...`);
                this.getAlias(retry+1);
            } else console.error("获取别名失败！");
        });
    }
    // 修改设备别名
    setAlias(alias, retry: number = 1){
        this.jpush.setAlias({sequence: this.sequence++, alias }).then(res=>{
            console.log("设置设备别名成功：", alias);
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`设置设备别名失败，重试中(${retry}/${this.retryCount})...`);
                this.setAlias(alias, retry+1);
            } else console.error("设置设备别名失败！");
        });
    }
    // 删除设备别名
    deleteAlias(retry: number = 1){
        return this.jpush.deleteAlias(this.getAliasOptions()).then(()=>{
            console.log("别名删除成功！");
        }).catch(err=>{
            if(retry <= this.retryCount) {
                console.log(`别名删除失败，重试中(${retry}/${this.retryCount})...`);
                this.deleteAlias(retry+1);
            } else console.error("别名删除失败！");
        })
    }

    /* ------------------------------------------------------------- */

    // 获取TagOption实例
    getTagOptions(tags: string[] = null): {sequence: number, tags: string[]} {
        return { sequence: this.sequence++, tags };
    }
    // 获取AliasOptons实例
    getAliasOptions(alias: string = null): {sequence: number, alias: string} {
        return { sequence: this.sequence++, alias };
    }

}

服务类完成之后我们在执行刚才的添加 TAG 标签操作就简单很多了：

clickBtn() {
    this.jpush.addTag("VIP2");
}