关于javascript:JS实现Web应用或网站发送浏览器Notification通知

37次阅读

共计 3720 个字符,预计需要花费 10 分钟才能阅读完成。

在开发一个 Web 利用零碎或者一个网站时,当用户触发了某个事件,或者零碎想告诉用户某个事件,比方有一条新的音讯、其他人点赞或者评论了文章、零碎流程被审核通过了等等诸如此类的场景,通常可能会想到 利用内告诉 的形式,然而这种形式有一个局限,就是如果用户切换到浏览器其余页签或者其余应用程序时,可能无奈及时看到利用零碎的告诉,那么这个时候就能够借助于浏览器的 Notification 告诉性能了。

1、什么是浏览器的 Notification

Notification 是浏览器提供的一种容许网页向用户显示零碎告诉的机制,这种零碎告诉是在顶级浏览上下文视口之外,因而即便用户曾经切换标签页或挪动到不同的应用程序,也能够显示,并且 Notification 相干的 API 被设计成与不同平台上的现有告诉零碎兼容。

首先来看看浏览器的 Notification 告诉是什么样的,这里以 SegmentFault 网站为例,只有有新用户关注或者文章被点赞珍藏,SegmentFault 网站都会主动发送 Notification 告诉(能看到告诉的前提是要容许网站发送告诉),具体告诉如下:

除了 SegmentFault 网站外,还能够看看网页版微信的零碎告诉,也是相似的。

2、如何应用 Notification

要显示一个零碎告诉,个别须要分成两步:用户授予显示告诉的权限 发送零碎告诉

(1)用户授予显示告诉的权限

零碎要给用户发送告诉,如果用户不想查看这个告诉,即没有授予相应的权限,那么即便告诉收回了,用户也是无奈看到的。

如何向用户询问是否容许查看零碎告诉的权限呢?能够应用上面的办法

Notification.requestPermission()

该办法的返回值有三个:granteddenieddefault,最新的标准已将此办法更新为基于 promise 的语法,工作原理如下:

Notification.requestPermission().then(function(permission) {...});

上面来看一个具体的实例,在 localhost 上询问显示零碎告诉的权限,依据不同的抉择后果,打印相应的日志信息,代码如下:

Notification.requestPermission().then(function(result) {if (result === 'denied') {console.log('回绝显示零碎告诉');
        return;
    }
    if (result === 'default') {console.log('默认');
        return;
    }
    console.log('容许显示零碎告诉')
});

按下 F12,关上 Chrome 的控制台,复制下面的代码

运行后,能够看到浏览器会弹出一个询问框,如下:

不同的抉择,控制台会输入不同的后果

  • 容许 :控制台会输入 容许显示零碎告诉,如果抉择了容许,再次申请权限时,不会再弹出抉择框,而是在控制台间接输入容许显示零碎告诉;
  • 禁止 :控制台会输入 回绝显示零碎告诉,如果抉择了回绝,再次申请权限时,不会再弹出抉择框,而是在控制台间接输入回绝显示零碎告诉;;
  • x 敞开 :控制台会输入 默认,如果间接敞开了,再次申请权限时,仍然会弹出抉择框;

抉择【容许】后,此时再点击地址栏的信息按钮,能够看到告诉已开启了,如下:

如果不想显示告诉了,能够间接在此处敞开告诉即可,也能够应用上面的语句来查看以后用户的受权状况,如下:

Notification.permission

运行后,输入后果

'granted'

(2)发送零碎告诉

当用户容许显示零碎告诉后,就能够发送告诉了,这时能够应用 Notification() 构造函数创立一个新告诉,这个办法能够传入两个参数,具体如下:

title(必传)

  • 定义一个告诉的题目,当它被触发时,它将显示在告诉窗口的顶部。

options(可选)

options 对象蕴含利用于告诉的任何自定义设置选项,罕用的选项有:

  • dir : 文字的方向;它的值能够是 auto(主动), ltr(从左到右), or rtl(从右到左);
  • lang: 指定告诉中所应用的语言。这个字符串必须在 BCP 47 language tag 文档中是无效的;
  • body: 告诉中额定显示的字符串;
  • tag: 赋予告诉一个 ID,以便在必要的时候对告诉进行刷新、替换或移除;
  • icon: 一个图片的 URL,将被用于显示告诉的图标;

除了上述 5 个罕用选项外,还有其余的 badgeimagedatavibraterenotifyrequireInteraction 等,具体可查看官方网站的介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Notification

上面来测试一个简略的告诉,代码如下:

let notification = new Notification('有一条新告诉');

这个告诉只有题目,运行后,能够看到

减少一些 options 选项,再次来测试一下零碎告诉,批改后的代码如下:

let notification = new Notification('有一条新告诉', {
    dir: 'ltr',
    lang: 'zh-CN',
    body: '告诉的注释内容:你的销假流程已批准',
    icon: 'http://localhost/coder/favicon.ico'
});

运行后,能够看到告诉如下

(3)告诉事件

Notification 告诉有四种事件,能够通过监听告诉事件来执行不同的操作,具体事件如下:

  • Notification.onclick:对 click 事件的解决,每当用户点击告诉时被触发;
  • Notification.onshow:对 show 事件的解决,当告诉显示的时候被触发;
  • Notification.onerror:对 error 事件的解决,每当告诉遇到谬误时被触发;
  • Notification.onclose:对 close 事件的解决,当用户敞开告诉时被触发。

上面来测试一下告诉事件的监听,代码如下:

let notification = new Notification('有一条新告诉', {
    dir: 'ltr',
    lang: 'zh-CN',
    body: '告诉的注释内容:你的销假流程已批准',
    icon: 'http://localhost/coder/favicon.ico'
});

// 监听告诉显示事件
notification.onshow = () => console.log('告诉已显示');

// 监听告诉点击事件
notification.onclick = () => console.log('告诉被点击');

// 监听告诉被敞开事件
notification.onclose = () => console.log('告诉被敞开');

// 监听告诉谬误事件
notification.onerror = () => console.log('告诉呈现谬误');

运行时,控制台会间接输入如下信息

告诉已显示

点击告诉时,会输入

告诉被点击

当告诉敞开时,会输入

告诉被敞开

3、发送 Notification 告诉代码

联合下面的介绍,上面给出发送告诉的参考代码,具体如下:

function sendNotification(title, body, icon, callback) {
    // 先查看浏览器是否反对
    if (!('Notification' in window)) {
        // IE 浏览器不反对发送 Notification 告诉!
        return;
    }
    
    if (Notification.permission === 'denied') {
        // 如果用户已回绝显示告诉
        return;
    }
    
    if (Notification.permission === 'granted') {
        // 用户已受权,间接发送告诉
        notify();} else {
        // 默认,先向用户询问是否容许显示告诉
        Notification.requestPermission(function(permission) {
            // 如果用户批准,就能够间接发送告诉
            if (permission === 'granted') {notify();
            }
        });
    }

    function notify() {
        let notification = new Notification(title, {
            icon: icon,
            body: body
        });
        notification.onclick = function() {callback && callback();
            console.log('单击告诉框')
        }
        notification.onclose = function() {console.log('敞开告诉框');
        };
    }
}

上面来测试一下:

sendNotification('上班告诉', '明天周五,还有十分钟上班', 'http://localhost/coder/favicon.ico');

运行后,告诉的成果如下:

参考资料:

  • https://developer.mozilla.org/zh-CN/docs/Web/API/notification
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API

正文完
 0