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）
安装过可以跳过这一步。

SDK Manager

更新Cordova安卓框架

cordova platform update android@6.0.0

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组件

<script type="text/javascript">
    // 定义一些公共的属性和方法
    // var signalr_conn;
    // var signalr_proxy;
    function SignalR_Connect(id) {
        console.log('SignalR Server Connect.');
        console.log(process.env.SIGNALR);
        window.alert(process.env.SIGNALR);
        window.alert($.hubConnection(process.env.SIGNALR));
        var signalr_conn = $.hubConnection(process.env.SIGNALR);
        var signalr_proxy = signalr_conn.createHubProxy("NoticeHub");
        signalr_proxy.on('sendNotice_callback', function(notice) {
            //收到SignalR消息提醒
            console.log(notice);
            //window.alert(notice);
            cordova.plugins.notification.local.schedule({
                id: Math.random(),
                title: '消息提醒',
                text: notice,
                foreground: true
            });
        });
        signalr_conn.start({ jsonp: true }).done((data) => {
            //成功
            console.log("SignalR Login." + id);
            window.alert("SignalR Login." + id);
            signalr_proxy.invoke("NoticeLogin_App", id);
        }).fail((data) => {
            //失败
        });
    }

    // 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);
    //     }
    // }

    // function SignalR_Logout(id) {
    //     if(this.signalr_proxy != undefined) {
    //         console.log("SignalR Logout." + id);
    //         this.signalr_proxy.invoke("NoticeLogout_App", id);
    //     }
    // }

    // 暴露出这些属性和方法
    export default {
        // signalr_conn,
        // signalr_proxy,
        SignalR_Connect,
        // SignalR_Login,
        // SignalR_Logout
    }
</script>

最后在需要使用的页面引用signalr_common组件

<script>
import signalr_common from './components/signalr_common.vue'
export default {
    create() {
        signalr_common.SignalR_Connect(id);
    }
}

</script>

Cordova结合SignalR实现移动端消息推送