H5 Web Notification桌面推送消息
来源:互联网 发布:手机报价软件 编辑:程序博客网 时间:2024/06/05 15:04
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就直接被抛弃了
我这里仅仅介绍一些简单的操作,想了解更多的,可以去网上搜资料,有新的发现希望能一起共享。
- H5 Web Notification桌面推送消息
- HTML5 Web Notifications 实现桌面消息推送
- Web Notification简单实现桌面消息通知(右下角提示)
- iphone push notification 消息推送
- iphone push notification 消息推送
- Android (Notification)消息推送机制
- Android (Notification)消息推送机制
- 《notification》WEB开发桌面通知
- html5 web notification 桌面通知
- Android- Notification消息推送和自定义消息推送
- web消息推送技术
- web消息推送
- web消息推送技术
- 实现web消息推送
- WEB即时通讯/消息推送
- 关于推送消息 (apple push notification)
- APNs Apple Push Notification Services 推送消息
- iphone push notification 消息推送(转)
- spark 2.1 on yarn -- container shell analysis
- Spring基础学习教程(applicationContext.xml 配置文件 详解)-07
- PHP如何在页面中原样输出HTML代码
- spring boot 最佳实践(二)--使用Bean Validation
- Android中解决破解签名验证之后导致的登录授权失效问题
- H5 Web Notification桌面推送消息
- node.js 安装问题
- Tiles
- Python-selenium(1)环境部署
- 关于位图(Bitmap)
- MicroService4Net快速搭建微服务(二)
- 新篇章,关于Thinkphpu将emoji写入myql
- 自定义maven archetype
- 优秀的日期类工具, 处理各种格式的日期