什么是消息推送

消息推送可以存在于浏览器端，也存在APP端。浏览器的推送，会在电脑通知中显示，app中显示在通知栏

PC端的实现

方法1:Notification

window.Notification是浏览器最小化后在桌面显示消息的一种方法，结合web-push就生成类似360等流氓软件在桌面右下角的弹窗广告，跟浏览器是脱离的，消息是置顶的

messagePush(){//监测浏览器是否支持if (window.Notification) {console.log("支持弹出框")} else {// 不支持console.log("不支持")alert("当前浏览器不支持弹出消息通知哦!")}if(window.Notification && Notification.permission !== "denied") {Notification.requestPermission(function(status) {if (status === "granted") {new Notification('标题啦啦啦', {body: '我才是给你看的内容！',});} else {alert("当前的浏览器不支持消息通知！！!");}});}}
}

效果如下

方法2：pushjs

pushjs

npm install push.js --save

这是一个封装好的通知库，具体可点击官网查看

import Push from 'push.js'pushMessage(){Push.Permission.request();Push.create("标题", {body: "我才是内容！！！",requireInteraction: true,//是否需要用户交互才会消失//icon: '/icon.png',//通知的图标timeout: 600000,//通知显示的时间});}

APP端

对于vue开发webAPP,对于消息推送到通知栏使用的技术为h5+Api的push模块

不过下面的示例代码为uniapp创建的。。为了省事

实现

//APP.vue中进行初始化事件监听定义
onLaunch: function () {//获取客户端推送标识信息,通常需要客户端在第一次运行时获取并提交到业务服务器绑定let info = plus.push.getClientInfo();//监听从通知栏点击消息的事件plus.push.addEventListener('click', function (msg) {console.log(JSON.stringify(msg))console.log(msg.payload)//处理点击消息事件//TODO}, false)//监听从在线服务器获取消息数据的事件plus.push.addEventListener('receive', function (msg) {console.log("receive:" + JSON.stringify(msg))//处理透传消息事件}, false)
},

//方法具体使用如下
pushMessage(){plus.push.createMessage("增加", "", {title: "你有一条提示",})
}

效果如下

打包设置

在进行打包的时候，需要对push模块进行设置