1.Cordova推送插件
1.1 安装插件
cordova plugin add cordova-plugin-local-notification
该命令执行完成后，可以通过cordova plugin list查看已安装的插件列表
这时候可以看到除了cordova-plugin-local-notification插件外，另外又多出了两个插件
cordova-plugin-device # 获取设备信息
cordova-plugin-badge # 未读消息数徽章显示
这两个插件都是cordova-plugin-local-notification必须依赖的
所以在安装cordova-plugin-local-notification时就自动安装了这里两个插件
1.2 升级安卓版本
虽然cordova-local-notification在GutHub ReadMe上说Android最低版本为4.5.1
但是在实际安装中Android版本低于6.0.0会报错
如果未安装Android系统环境，需要使用SDK Manager安装Android 6.0（API 23）
安装过可以跳过这一步。
更新Cordova安卓框架
cordova platform update [email protected]
1.3 打包安卓安装包
安装cordova-plugin-local-notification后进行打包，会报NotificationChannel的错误
NotificationChannel是Android 8.0引入的新特性，插件没有对低于Android 8.0的版本进行处理。
解决方法：
打开项目解决方案\platforms\android\src\de\appplant\cordova\plugin\notification\Manager.java屏蔽以下代码
// import android.app.NotificationChannel;
// import static android.os.Build.VERSION_CODES.O;
private void createDefaultChannel() {
// NotificationManager mgr = getNotMgr();
// if (SDK_INT < O)
// return;
// NotificationChannel channel = mgr.getNotificationChannel(CHANNEL_ID);
// if (channel != null)
// return;
// channel = new NotificationChannel(
// CHANNEL_ID, CHANNEL_NAME, IMPORTANCE_DEFAULT);
// mgr.createNotificationChannel(channel);
}
2.极光推送JPush
2.1 官网
极光推送JPush官网
注册后新建应用，获取AppKey
2.2 Cordova插件
jpush-phonegap-plugin
cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey --save
2.3 本地通知
Android
window.JPush.addLocalNotification(0, notice, '计划审核推送', Math.random(), 0, "");
IOS
window.JPush.addLocalNotificationForIOS(0, notice, -1, "fss_" + Math.random().toString(), {});
3.SignalR服务器跨域
3.1Signal Hub
参考：SignalR实现IM和消息推送
3.2Signal设置跨域
设置允许跨域Core，同时允许使用JsonP连接
using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;
[assembly: OwinStartup(typeof(znfss.App_Start.Startup))]
namespace znfss.App_Start
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
//app.MapSignalR();
// 连接标识
app.Map("/signalr", map =>
{
//跨域
map.UseCors(CorsOptions.AllowAll);
map.RunSignalR(new HubConfiguration
{
EnableJSONP = true
});
});
// 在应用程序启动时运行的代码
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
4.在Vue.js中使用SignalR
4.1原理
1.定义signalr_conn连接Hubs服务器地址，这里会自动连接地址下的/signalr/hubs
var signalr_conn = $.hubConnection(process.env.SIGNALR);
2.定义signalr_proxy连接对应的Hubs集线器，这里会根据HubsName连接对应的集线器
var signalr_proxy = signalr_conn.createHubProxy("NoticeHub");
3.使用signalr_proxy.on定义消息接收，注意这里的消息接收名称为HubsMethod内Clients方法定义的名称
signalr_proxy.on('sendNotice_callback', function(notice) {
// 接收到消息以后的操作
// 调用cordova-plugin-local-notification
cordova.plugins.notification.local.schedule({
id: Math.random(),
title: '消息提醒',
text: notice,
foreground: true
});
});
4.启动SignalR连接池，注意这里要设置JsonP: true
signalr_conn.start({ jsonp: true }).done((data) => {
//成功
}).fail((data) => {
//失败
});
5.在需要的地方使用signal_proxy.invoke调用Hubs服务器推送消息，注意这里的名称对应HubsMethod，在调用前判断一下signalr_proxy == undefined
function SignalR_Login(id) {
if(this.signalr_proxy == undefined) {
SignalR_Connect(id)
}
else {
console.log("SignalR Login." + id);
this.signalr_proxy.invoke("NoticeLogin_App", id);
}
}
4.2源码
首先安装SignalR的package，需要注意的是SignalR依赖jQuery
npm install signalr
npm install jquery
然后在main.js中引用
import signalR from 'signalr'
import $ from 'jquery'
新建signalr_common.vue组件
最后在需要使用的页面引用signalr_common组件