html5桌面通知之NotificationAPI详解-

发布时间：08/01 来源：未知浏览：关键词：

NotificationAPI是HTML5新增的桌面通知API，用于向会员显示通知信息。该通知是离开阅读器的，即便会员没有停顿在目前标签页，甚至最小化了阅读器，该通知信息也同样会置顶显示出来。

前言

Notification API 是 HTML5 新增的桌面通知 API，用于向会员显示通知信息。该通知是离开阅读器的，即便会员没有停顿在目前标签页，甚至最小化了阅读器，该通知信息也同样会置顶显示出来。

会员权限

想要向会员显示通知新闻，需要猎取会员权限，而雷同的域名只需要猎取一次权限。只要会员允许的权限下，Notification 才干起到作用，以免某些网站的广告滥用 Notification 或其它给会员造成影响。那么怎样晓得会员到底是允不允许的？

Notification.permission 该属性用于表白目前通知显示的授权状态，可能的值包含：

default ：不晓得会员的选中，默许。
granted ：会员允许。
denied ：会员拒绝。

if(Notification.permission === 'granted'){
    console.log('会员允许通知');}else if(Notification.permission === 'denied'){
    console.log('会员拒绝通知');}else{
    console.log('会员还没选中，去向会员申请权限吧');}

要求权限

当会员还没选中的时候，我们需要向会员去要求权限。Notification 对象供给了 requestPermission() 办法要求会员目前来源的权限以显示通知。

之前基于回调的语法已经弃用（固然在此刻的阅读器中还是能用的），最新的标准已将此办法更新为基于 promise 的语法：

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('会员允许通知');
    }else if(permission === 'denied'){
        console.log('会员拒绝通知');
    }});

推送通知

猎取会员授权之后，就可以推送通知了。

var notification = new Notification(title, options)

参数如下：

title：通知的标题
options：通知的设定选项（可选）。

body：通知的内容。
tag：代表通知的一个辨认标签，雷同tag时只会打开统一个通知窗口。
icon：要在通知中显示的图标的URL。
image：要在通知中显示的图像的URL。
data：想要和通知关联的任务类型的数据。
requireInteraction：通知维持有效不主动关闭，默许为false。

还有一些其他的参数，由于用不了或者没什么用这里就没须要说了。

var n = new Notification('状态更新提示',{
    body: '你的伴侣圈有3条新状态，快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true})

通知新闻的结果图如下：

var n = new Notification('状态更新提示',{
    body: '你的伴侣圈有3条新状态，快去查看吧'})setTimeout(function() {
    n.close();}, 3000);

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发响应事件，比方打开一个网址，指导会员回到本人的网站去。

var n = new Notification('状态更新提示',{
    body: '你的伴侣圈有3条新状态，快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }})n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 而且关闭通知}

利用场景

前面说那么多，其实就是为了用。那么到底哪些地方可以用到呢？

此刻网站的新闻提示，大多数都是在新闻核心显示个新闻数目，然后发邮件告诉会员，这流程完全没有错。不外像我这种会员，觉得他人点个赞，珍藏一下都要发个邮件提示我，老是要去删邮件（强制症），我是觉得挺烦的甚至关闭了邮件提示。

固然这里并不是说要用 Notification，究竟它和邮件的功能完全不同。

我觉得比拼适合的是消息网站。会员阅读消息时，可以推送给会员实时消息。以腾讯体育为例，它就运用了 Notification API。在页面中引入了一个 notification2017_v0118.js，有乐趣可以看看他人是怎么成熟的运用的。

一进入页面，就猎取授权，同时本人页面有个浮动框提醒你允许授权。要是允许之后，就开端给你推送通知了。不外它在关闭标签卡的时候，通知也会被关闭，那是由于监听了页面 beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();}if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);}

以上就是html5桌面通知之Notification API详解的细致内容，更多请关注百分百源码网其它相干文章！

打赏