H5 Web Notification桌面推送消息

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就直接被抛弃了
这里写图片描述

我这里仅仅介绍一些简单的操作,想了解更多的,可以去网上搜资料,有新的发现希望能一起共享。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值