什么是消息推送

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

浏览器及app消息推送相关推荐

如何构建一套高可用的 APP 消息推送平台
转载自如何构建一套高可用的 APP 消息推送平台消息推送作为移动 APP 运营中的一项关键技术,已经被越来越广泛的运用.本文追溯了推送技术的发展历史,剖析了其核心原理,并对推送服务的关键技术进行 ...
IOS开发之实现App消息推送（最新）
IOS开发之实现App消息推送(最新) 标签: 推送最新AppStoreXCode6ios开发 2014-11-19 21:13 58412人阅读评论(77) 收藏举报分类: IOS ...
国内APP消息推送机制以及微信消息延迟问题剖析
转自:https://club.huawei.com/thread-15878044-1-1.html 一.前言随着安卓手机以及QQ/微信/支付宝/滴滴出行/美图外卖等一大批移动通信/移动消费应用的 ...
APP消息推送测试点
APP消息推送测试点 2019.03.15 17:38:39 字数 190 阅读 50 消息推送对象 1.单个推送 2.多个推送 3.及安卓和IOS渠道推送 ps: 注意生产环境和测试环境的分开,避免 ...
利用MUI+个推实现APP消息推送
利用MUI+个推实现APP消息推送从2015年7月开始使用MUI进行APP的开发,到现在已经有一个年头了.而以前做过的东西都没有整理过,以后会将自己遇到的坑整理下来. 这篇主要是讲利用MUI和集成的 ...
app消息推送服务器端,系统服务:APP消息推送服务
APP消息推送服务开通方法在云表官网-管理控制台中,选择要开通APP消息推送服务的服务器,然后选择要开通APP消息推送服务的应用空间,点击对应应用空间的"应用空间管理". 在进入 ...
php实现app消息推送
如何用php实现APP消息推送现在有很多的消息推送厂商,比如阿里云的消息推送,极光推送,融云的消息推送.他们的原理都是把sdk内置在app里面,达到消息推送的目的,通过一张图来了解一下,看不懂不要紧 ...
阿里云APP消息推送中间件使用
1.所需jar包建议使用较新版本,项目一开始使用低版本时,有出现推送失败的情况 <dependency><groupId>com.aliyun</groupId> ...
如何做好APP消息推送
01 简介推送通常被业内人士称为Push,作为现在移动互联网时代手机APP重要功能,它的稳定性和能力对一个APP甚至企业的发展至关重要.通过推送可以唤起APP的不活跃用户,提升与保持DAU有很大帮助 ...

浏览器及app消息推送

消息推送