最近公司有个项目,前端使用的是react+node.js,需要增加一个推送功能,我选用了goeast作为本次推送后台,原来的友盟我尝试过,只能推送原生,混合不支持。后台推送前端,前端能接收到消息,这功能已经完成。前端我采用的是H5plus,开发工具hbuilder,H5+的优势是支持了原生40万+的api(官方号称),写法和原生基本差不多,只要你原生写出来没问题,代入js模式即可。然后我傻傻的写了套原生android,测试OK没问题,再代入前端,把对象改成var,把导入的类改成plus.android.importClass.实现了安卓的推送,弹出通知,点击跳转到指定app,没有app跳转到指定网页。
下图是我要实现的功能。
下图是原生的代码
以下是js开启推送的弹出通知跳转的代码
<script type="text/javascript">
var mainActivity = null,
name = null,
Context = null,
Notification = null,
NotificationManager = null,
PendingIntent = null,
Intent = null,
PackageManager = null,
Uri = null,
appkeyGoEasy = null;
document.addEventListener("plusready", function() {
//判断是ios还是安卓
judgePlatform(); //安卓调用安卓的方法,ios调用ios的方法
}, false);
var goEasy = new GoEasy({
appkey: 'XXXXXXXXXXXXXX'
});
goEasy.subscribe({
channel: 'XXXXXXXXXXXX',
onMessage: function(message) {
alert(appkeyGoEasy);
alert(message.content);
//根据当前手机是安卓还是ios做判断
if(name == "Android") {
njsNotifactionForAndroid(message);
} else if(name == "iOS") {
createLocalMessageForIOS(message.content, message.content, 17301620);
}
}
});
//mainActivity就相当于this,Context是上下文
function njsNotifactionForAndroid(message) {
var builder = new Notification.Builder(mainActivity);
var manager = mainActivity.getSystemService(Context.NOTIFICATION_SERVICE);
builder.setSmallIcon(17301620);
builder.setContentText(message.content);
builder.setContentTitle(message.content);
builder.setAutoCancel(true); // 点击跳转后自动销毁
builder.setDefaults(Notification.DEFAULT_VIBRATE); //向通知添加声音、闪灯和振动效果的最简单、最一致的方式是使用当前的用户默认设置,使用defaults属性,可以组合:
var pManager = mainActivity.getPackageManager();
var intent = plus.android.invoke(pManager, "getLaunchIntentForPackage", "io.dcloud.H53302ED8");
//intent如果为null就说明没有安装。这个时候给用户跳转到一个webview进行下载
if(null == intent) {
// 当前Webview对象的实例
var uri = Uri.parse("http://www.baidu.com/");
intent = new Intent(Intent.ACTION_VIEW, uri);
//var wv = plus.android.currentWebview();
// 跳转页面,实际应该是下载地址,放在这里即可
//plus.android.invoke(wv, "loadUrl", "http://www.baidu.com/");
var pendingIntent = PendingIntent.getActivity(mainActivity, 0X0002, intent, PendingIntent.FLAG_UPDATE_CURRENT);
builder.setContentIntent(pendingIntent); //点击开启
manager.notify(0X0001, builder.getNotification());
} else {
var pendingIntent = PendingIntent.getActivity(mainActivity, 0X0002, intent, PendingIntent.FLAG_UPDATE_CURRENT);
builder.setContentIntent(pendingIntent); //点击开启
manager.notify(0X0001, builder.getNotification());
}
}
//判断是IOS还是安卓
function judgePlatform() {
switch(plus.os.name) {
case "Android":
// Android平台: plus.android.* 程序全局环境对象,内部自动导入Activity类
alert("安卓==>" + plus.os.name);
initAndroid(); //对安卓的类进行初始化
break;
case "iOS":
name = "iOS";
// iOS平台: plus.ios.*
alert("苹果==>" + plus.os.name);
break;
default:
// 其它平台
break;
}
}
function initAndroid() {
name = "Android";
mainActivity = plus.android.runtimeMainActivity();
Context = plus.android.importClass("android.content.Context");
Notification = plus.android.importClass("android.app.Notification");
NotificationManager = plus.android.importClass("android.app.NotificationManager");
PendingIntent = plus.android.importClass("android.app.PendingIntent");
Intent = plus.android.importClass("android.content.Intent");
PackageManager = plus.android.importClass("android.content.pm.PackageManager");
Uri = plus.android.importClass("android.net.Uri");
}
/**
* IOS原生方法
* @param {Object} contentTitle
* @param {Object} contentText
* @param {Object} smallIcon
*/
function createLocalMessageForIOS(contentTitle, contentText, smallIcon) {
console.log('ios begin.');
var UILocalNotification = plus.ios.importClass("UILocalNotification");
// 创建UILocalNotification类的实例对象
var localNotification = new UILocalNotification();
//设置调用时间
var NSDate = plus.ios.importClass('NSDate');
var myNSDate = new NSDate();
myNSDate.dateWithTimeIntervalSinceNow = 1; //1秒后触发
localNotification.fireDate = myNSDate;
localNotification.alertBody = contentText;
localNotification.applicationIconBadgeNumber = 3;
localNotification.alertAction = '打开应用!';
localNotification.alertLaunchImage = 'Default';
localNotification.soundName = UILocalNotification.DefaultSoundName;
var UIApplication = plus.ios.importClass("UIApplication");
var myUIApplication = new UIApplication();
myUIApplication.scheduleLocalNotification = localNotification;
//销毁对象实例
plus.ios.deleteObject(localNotification);
plus.ios.deleteObject(myUIApplication);
plus.ios.deleteObject(myNSDate);
console.log('ios end.');
}
</script>
</head>
<body>
<a href="index.html">刷新</a>
</body>
上述代码安卓实现了推送,通知等功能,使用之后给我的感觉H5+确实强大,而且打包之后性能不输原生,但是开发当中也发现H5+有很多改进的地方,官方引入了安卓四大组件之一activity,可是broadCastReceiver,service,ContentProvide呢?举个简单例子,安卓中消息推送,即使关闭app,还是有办法开启service,注册静态广播,写一个fork的c函数,让他在后台运行不被杀死。可是H5+要实现貌似还不行,或者是我还没看到,但是html5+的跨平台确实对于原生有极大的冲击力。
抛出问题:1.以上的IOS这串代码我测试下来通知出不来,根据官方api写的,问题不知道在哪里,请各位帮忙看看,找下问题,想了好久了,没找出原因。
2.这个channel值如何获取,如何设置呢。因为需要个推,这个也是我在想的问题,希望知情小伙伴一起看看。
以下的连接是为了实现这功能所看的相关资料,虽然IOS还没搞出来,但是感觉学到了很多新东西,对于H5+大开眼界,以下学习资料和大家一起分享。
H5+官方api
东翌编程
HTML5+ API 模块整理
HTML5+ App开发Native.js入门指南
Native.js,让js像原生一样强大+++江树源(数字天堂CTO)
HTML5+安卓api
HTML5+培训资源视频教程汇总
Hybird安卓的调试方式
Hybird苹果的调试方式
IOS推送