持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

序

在window中，右侧经常会出现一些通知消息。那么这种消息能否使用js来控制传达呢？比如说使用electron制作一个应用后，需要使用右侧来进行消息通知。

然后查看MDN的web api接口文档，里面有一个Notifications API

官方定义：Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

在支持该接口的平台上，可以使用其来调用消息通知。

实现

既然如此，那么就动手实验一下吧

构造方法： let notification = new Notification(title, options)

很简单，第一个参数是消息通知的名称，第二个是各种可选参数

测试代码：

let options = {
    body: '这是来自window的消息通知',
    icon: require('../../assets/img/icon1.png')
}

let n = new Notification('消息发送1',options);
console.log(n)

发现虽然n打印出来了，但消息通知并没有出现。

那么接下来就编写一个测试方法，测试能否进行消息通知，如果不能，则使用Notification.requestPermission进行请求权限处理requestPermission是一个promise。

首先先判断window.Notification是否存在，验证当前浏览器是否支持。然后对Notification.permission进行判断，permission一共有三种状态：

一般来说，我们的浏览器会是默认default的状态。所以此时，就可以使用requestPermission去进行请求了，会出现一个弹窗，让我们点击是否同意。

这也是requestPermission是promise的原因，因为要等待选择

可以将上述步骤整理成一个验证请求方法：

function notifyMe() {   
    return new Promise((resolve)=>{      
        // 检查浏览器是否支持
        if (!window.Notification) {
            resolve(false)
        } else {
            // 用户已同意
            if (Notification.permission == 'granted') {
                resolve(true)
            } else {
                Notification.requestPermission().then(function(result) {
                    if (result == 'granted') {
                        resolve(true)
                    } else {
                        resolve(false)
                    }
                })
            }
        }
    })
}

通过该方法，就可以在浏览器中申请到调用消息通知的权限了。点击允许后，就可以发送消息通知了

PS: 此外，如果想重新测试，可以在chrome浏览器的url前的！符上重新设置

Electron

如果是在electron当中使用消息通知，那么就可以省略判断的过程了。也就是说，在electron当中，并不需要用户授权，也可以调用Notification来发送消息通知。

这样会方便很多，利用这个特性，我们可以制作很多很有意思的桌面小应用，比如我之后要制作的番茄钟应用

示例：

Notification发送消息

序

实现

Electron