序

在 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 来发送消息通知。

示例：