H5 Web Notification桌面推送消息
2017-05-24 14:20
681 查看
H5 Web Notification桌面推送消息
由于这两天公司项目刚好做到一个需要实时桌面推送的功能,就像平时QQ,微信消息推送那种,这个时候我们就可以用到HTML5 Web Notification 这个API了。Notification.requestPermission(function (permission) { if (permission == "granted") { var notification = new Notification("您有一条新的消息",{ dir: "auto", lang: "zh-CN", tag: "testNotice", icon:'ant.png', body: '你好啊!我是蚂蚁,我在测试桌面推送' }); } }
该API伴随服务器操作,打开浏览器,运行localhost,会出现一个弹窗:
(注意:如果这段代码放在html中执行,一定要创建虚拟服务器,即用域名访问,如:localhost,不能直接用file:index.html 这样的路径访问,因为这个不是http协议,浏览器不接受本地文件的通知设置。)
如果之前没有为该域名请求权限,则不会有弹窗。选择【允许】,则可以进行桌面推送:
在Mac上,推送的消息一般都会在屏幕右上角弹出(这里举例谷歌浏览器,不同浏览器弹出方式不同,有兴趣的可以自己去试试)
在window系统,一般会在右下角弹出推送消息
Notification.permission这是一个静态属性,有3个值,default, granted, denied
default表示还没有发出过请求,或者之前请求过,但是用户并没有允许或者禁止,二是直接关闭窗口。这种状态下是不会有通知的。granted表示之前向用户请求过权限,而且用户已经允许了。
denied表示之前向用户请求过权限,但是用户已经拒绝了。
new Notification(title, options),其中title是必须参数,表示推送消息框的标题内容,options是可选参数,下面是一些参数的简单说明(一些常用的,其他的有兴趣的可以自己去了解)
lang:提示的语言
bady:提示消息的主体内容
tag:标记当前通知的标签
icon:左边的显示头像或者图标
renotify:是否替换之前的通知项
事件句柄
Notification.onclick处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow
处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror
处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose
处理 close 事件的处理。当用户关闭通知时被触发。
最后就是该API的兼容性啦,IE就直接被抛弃了
我这里仅仅介绍一些简单的操作,想了解更多的,可以去网上搜资料,有新的发现希望能一起共享。
相关文章推荐
- springboot实现服务器端消息推送(H5原生支持)
- android不使用推送,在桌面图标上显示消息数量
- iOS如何显示桌面应用图标上的推送消息数(大神勿进)
- (翻译)H5数据流消息推送机制Event Source
- HTML5 Web Notifications 实现桌面消息推送
- H5+个推实现消息推送服务
- h5 消息推送 jpush-phonegap-plugin 插件的使用
- H5WebSocket消息推送
- h5/5+APP消息推送神器:Goeasy.js
- web实现消息推送及桌面提醒
- 自定义iOS 中推送消息 提示框
- 微信批量关注公众号,推送消息软件介绍
- 苹果消息推送服务器 php 证书生成
- iOS 【极光推送】第一次打开app,收不到推送消息
- 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(一)
- 使用HttpWebRequest发送自定义POST请求(以http方式推送消息)
- web消息推送
- iPhone消息推送机制实现与探讨
- Socket实现消息推送
- (转)移动端主动推送消息原理