浏览器及app消息推送

什么是消息推送

消息推送可以存在于浏览器端，也存在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模块进行设置