ionic2實戰-極光推送

傳送門

極光官網

極光開發者控制檯

jpush-phonegap-plugin

jpush 通用API

jpush Android API

jpush Ios API

準備

註冊並登錄極光官網創建一個應用

生成AppKey AppKey一會用來安裝插件

推送設置 android設置,填寫應用包名點擊提交.(包名是app根目錄下congfig.xml中的id值) ios設置本文後面會講

安裝插件

1.使用命令安裝

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

命令安裝插件過程如下圖,會安裝jpush-phonegap-plugin和cordova-plugin-jcore兩個插件,這兩個插件大概有19M,如果網絡慢就使用本地安裝

2.本地安裝

去github上下載cordova-plugin-jcore和jpush-phonegap-plugin到本地

下載後解壓到某目錄,如我解壓到D盤根目錄,安裝過程如下圖

插件安裝完成,依次執行下面命令,build app看插件是否報錯

cordova platform rm android

cordova platform add android

ionic cordova build android

項目中集成推送功能

如下圖,創建一個類並添加初始化極光推送代碼.我創建的類名叫Helper.ts你隨意

Helper.ts完整代碼

最新代碼可參考Helper.ts

/**

* Created by [email protected] 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);

}

注意:極光推送最新版設置別名方法有所改變.本文使用的方法是舊版.詳情請看:https://github.com/jpush/jpush-phonegap-plugin/blob/master/doc/Common_detail_api.md#setalias如下圖,在app.component.ts調用初始化推送方法(點擊圖片放大看)