传送门
极光官网
极光开发者控制台
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 yanxiaojun617@163.com 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调用初始化推送方法(点击图片放大看)
在获取到用户信息或用户重新登录时.你可能需要调用设置别名方法.
this.helper.setAlias(userInfo.id);
别名只能设置一个,一般设置用户的唯一标识,如用户id或用户登录名.如我设置的是用户id,这样就可以根据用户id推送消息
别名不能是number类型,如设置别名为1,在ios设置失败.在android上可以的.所以最好统一设置.setAlias(String(1));或.setAlias('' + 1);.这个bug可能以后会修复
点击推送跳转到指定页面
- 在
jpush.openNotification事件中发布事件
- 在
app.component.ts订阅事件.完整代码可参考app.component.ts中的jpushOpenNotification()
如果你可以跳转到指定页面,但是android返回按钮处理事件出现bug.请参考app.component.ts中的registerBackButtonAction()
- 如果你的app没有分tab
测试
- 安装了推送插件后,还没有执行过
ionic platform rm android和ionic platform add android,请执行 - 然后执行
ionic build android生成apk发送到手机上安装并打开app
如果推送了消息,但是app没启动,这时候是收不到消息的.当app启动会立即收到消息
- 进入极光推送控制台,填写推送内容,点击立即推送,看app是否收到.
关于ios推送
ios极光推送插件的安装和使用方式和android一样
如果android端推送功能已经ok,那推送插件和代码应该不用改动了.下面说说ios推送的注意事项
如果对ios证书和ios打包还不够了解,请先看这里
推送证书
ios推送需要申请推送证书,并把推送证书添加到Mac的钥匙串中,然后从钥匙串中导出证书并上传到极光推送设置中,过程如下
-
苹果开发者官网申请推送证书
-
把推送证书添加到钥匙串
-
从钥匙串中导出推送证书并上传到极光推送ios设置中
ios打包
- 依次执行下面命令
ionic platform rm ios
ionic platform add ios
ionic build ios
- 注意
ionic build ios会报一个i386错误,这个错误不用管,极光开发人员说是ios模拟器问题.
官网给的解决方法是执行
ionic platform update ios,如下图
但是当又执行了ionic platform rm ios和ionic platform add ios,然后重新build的时候,还是会有这个错误.所以不用管它继续打包
-
用xcode打开app,设置app的打包证书.打开推送功能
-
剩下的就是熟练的打包流程
-
测试方法和上面gif图演示的一样,只是要选择ios开发环境或ios生产环境
最后
- 更完整代码在github
- 推送消息一般是由后台代码推送.
如后台检测用户几天未登录则推送一条消息；web端给使用app的工作人员安排了一个工单要推送一条消息 - 所以要集成极光推送后台服务
去极光官方github搜索你的后台开发语言,我的是java,然后看文档集成到你的后台代码中.....
网友评论
这个插件的安装步骤没有写是吧？
我的第一次运行ionic cordova build android 报错：
Error: Missing binding /Users/yonghu1/Desktop/demo-project/demo/node_modules/node-sass/vendor/darwin-x64-48/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 6.x
Found bindings for the following environments:
- OS X 64-bit with Node.js 8.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
at module.exports (/Users/yonghu1/Desktop/demo-project/demo/node_modules/node-sass/lib/binding.js:15:13)
at Object.<anonymous> (/Users/yonghu1/Desktop/demo-project/demo/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/yonghu1/Desktop/demo-project/demo/node_modules/@ionic/app-scripts/dist/core/bundle-components.js:6:16)
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//极光推送
jpush.init().then(() => {
jpush.setDebugMode(true);
jpush.getRegistrationID().then(regid=>{
this.storage.set('jpush_regid',regid);
console.log('jpush_regid_'+regid);})
.catch(err=>{
console.log('jpush_regid_'+err);
});
}).catch(err =>{
console.log('registrationId获取失败');
});
statusBar.styleDefault();
splashScreen.hide();
});
}
let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
alert("jpush.openNotification" + content);
}, false);
请问下博主，这个回调我收到了，但是怎么在回调函数里把数据存储起来并调用其他函数做其他动作呢，这个作用域貌似不支持this，掉不到js的其他函数
没有满足条件的推送目标
如果是群发：则此应用还没有一个客户端用户注册。请检查 SDK 集成是否正常。
如果是推送给某别名或者标签：则此别名或者标签还没有在任何客户端SDK提交设置成功。
如果是根据 Registration ID 推送：则此 Registration ID 不存在。
Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:111389 Ionic Native: deviceready event fired after 7861 ms
index.html:1 GET file:///android_asset/www/assets/fonts/roboto-medium.woff net::ERR_FILE_NOT_FOUND
小军哥你看能解决不？
//设置标签/别名回调函数
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);
setAlias方法请以极光推送官网为准.新旧版本有变话,我目前使用的是旧版本
https://github.com/jpush/jpush-phonegap-plugin/blob/master/doc/Common_detail_api.md#setalias
我通过广播推送消息，app能够接受到，使用别名就发送不了
window['plugins'].jPushPlugin.setAlias('' + userId);
如果你还接受不到,那你就真机调试
真机调试,给这个回调函数打断点肯设置别名是否成功.
//设置标签/别名回调函数
document.addEventListener("jpush.setTagsWithAlias", event => {}, false);
main.js:111794 Ionic Native: deviceready event fired after 183 ms
这个错误是什么原因，模拟器上调试的时候报这个错。
let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
alert("jpush.openNotification" + content);
当时一直不出来提示框
document.addEventListener("jpush.openNotification", event => {
let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
alert("jpush.openNotification" + content);
}, false);
//收到通知时会触发该事件
document.addEventListener("jpush.receiveNotification", event => {
let content = this.nativeService.isIos() ? event['aps'].alert : event['alert'];
alert("jpush.receiveNotification" + content);
}, false);
//收到自定义消息时触发这个事件
document.addEventListener("jpush.receiveMessage", event => {
let message = this.nativeService.isIos() ? event['content'] : event['message'];
alert("jpush.receiveMessage" + message);
}, false);
三个都弄了alert,接收到推送就是不提示，照着抄的
document.addEventListener("jpush.receiveMessage", event => {}, false);
但是在里面写提示框，一直不出来