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

1、什么是浏览器的 Notification ？

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

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

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

2、如何应用 Notification ？

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

（1）用户授予显示告诉的权限

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

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

Notification.requestPermission()

该办法的返回值有三个：granted、denied、default，最新的标准已将此办法更新为基于 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个罕用选项外，还有其余的 badge、image、data、vibrate、renotify、requireInteraction 等，具体可查看官方网站的介绍 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