PWA 学习笔记之 Web Notifications API
cn-programming·@semlinker·
0.000 HBDPWA 学习笔记之 Web Notifications API
Web Notifications API 允许网页向最终用户显示系统通知，这些通知在顶级浏览器上下文窗口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以正常显示。
说来也巧，在思考如何下笔时，刚好收到 [sitepoint](https://www.sitepoint.com/) 发来的通知。它竟然自己送上门来，那我就不客气了，直接拿它 "开刀"。
(截图来源：[sitepoint](https://www.sitepoint.com/) 桌面通知)
初看起来，觉得挺简单的，但实际动手前却不知道如何下手，所以还是得乖乖地补一下 Web Notifications API 相关的基础知识。撸新的 API 前，直觉告诉我，还是得先了解一下其兼容性，这个任务当然还是交给我们的 [caniuse](https://caniuse.com/) 啦。写本文时，Web Notifications API 的兼容性如下图所示：
(截图来源：[caniuse - Notifications](https://caniuse.com/#search=Notifications))
从图中可以看出，Web Notifications API 在 PC 平台上的支持度还是蛮高的。作为 Chrome 的忠实用户，我就不用担心了。在支持该特性的平台上，显示系统通知需要以下步骤：
- 判断用户是否授权显示通知，若用户未授权则可以使用 `Notification.requestPermission` 方法来请求通知授权；
- 使用 `Notification` 构造函数创建一个新通知。
虽然我是 Chrome 粉，但为了保证代码的健壮性，我们还是得判断当前平台是否支持 Web Notifications API，如果当前平台支持的话，我们可以获取 Notification 对象，此外通过该对象的 permission 属性，我们可以获取用户对通知消息的授权情况，具体代码如下：
```javascript
function initNotification() {
if (!('Notification' in window)) {
alert('当前浏览器不支持通知！');
} else if (Notification.permission === 'denied') {
console.log('用户拒绝通知权限！');
} else if (Notification.permission === 'granted') {
console.log('用户允许通知权限！');
}
}
```
如果发现 Notification 对象的 permission 状态不等于 **'granted'**，我们可以在发送通知的时候，调用 Notification 对象的 requestPermission 方法请求用户授权，具体代码如下：
```javascript
// 监听发送通知操作
document.querySelector('#notificationsBtn').addEventListener('click', () => {
if(Notification.permission === 'granted') {
createNotification();
} else {
// 可能的状态为：denied或default，若状态为denied则requestPermission方法无效
Notification.requestPermission(function(permission) {
// 如果用户同意，就可以向他们发送通知
if (permission === "granted") {
createNotification();
}
});
}
});
```
那么问题来了，有没有办法手动调整通知权限呢？答案是可以的，也许有些小伙伴有留意到 sitepoint 通知消息上有一个 **设置** 按钮，当然你也可以在 chrome 中输入以下地址：
```
chrome://settings/content/notifications
```
进入消息通知的设置页面。接下来我们来了解一下 Notification 构造函数，该构造函数接收两个参数：
- title（必选）—— 定义一个通知的标题，当它被触发时，它将显示在通知窗口的顶部。
- options（可选）—— 包含应用于通知的任何自定义配置选项，支持的主要配置项有：
- dir：显示通知的方向；
- lang：指定通知中所使用的语言；
- body：表示通知的正文，将显示在标题下方；
- tag：表示通知的一个识别标签；
- icon：包含要在通知中显示的图标的 URL；
- data：与通知相关联的任意数据。
刷完 Web Notifications API 相关的基础知识，我们开始来实战一下，即模仿 sitepoint 发送的通知消息。经过多次尝试，我们发现只要简单配置相关参数，我们的 "赝品" 就有模有样了，具体代码如下：
```javascript
var notification = new Notification(
"Introducing WhatFontIs is the Easiest Way to Identify Fonts Online",
{
body: "A free service to help you ...",
icon: "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/10/1507698696SitePoint@2x-96x96.png",
});
```
通知消息已经能够显示出来了，但是感觉还是缺少了点东西。现在让我们来回想一下，当你点击手机上的桌面通知消息，系统会自动唤醒对应的 APP，然后进入到对应的通知页面。是的，没错！目前我们还需要响应用户点击通知的操作。通过查阅 Web Notifications API 相关文档，我们发现可以为新建的通知对象绑定点击事件的处理器，具体代码如下：
```javascript
notification.onclick = () => {
window.open('https://www.sitepoint.com/finding-fonts-whatfontis/');
};
```
以上代码成功运行后，当用户点击上述通知时，会自动创建新的 Tab 页并进入对应的页面。除了 `onclick` 事件处理器之外，通知对象还支持以下事件：
- onshow：当通知显示时被触发；
- onerror：当通知遇到错误时被触发；
- onclose：当用户关闭通知时被触发。
下面我们来总结一下已使用过的属性：
**需要注意的是图中浏览器图标和当前域名是系统默认显示的**。
最后还有一个问题需要说明一下，如果用户在首次请求通知授权或者在通知设置页面中，禁止对当前域名的通知授权。**那么再次调用 Notification.requestPermission 方法，重新发起授权请求是无效的**。针对这个问题，我们可以引导用户重新启用通知权限，具体如下图所示：
（Chrome 版本信息： 63.0.3239.132（正式版本） （64 位））
本文通过模仿 [sitepoint](https://www.sitepoint.com/) 的消息通知，简单介绍了 Web Notifications API 相关的一些基础知识。完整的示例代码，已放到 [Gist](https://gist.github.com/semlinker/ddd190ad269c0866bbd2e35b4d4009a7) 上，有兴趣的小伙伴可以参考一下。另外 Github 上有个名为 [notify.js](https://github.com/alexgibson/notify.js) 的项目，该项目对 Web Notifications API 进行了封装，感兴趣的小伙伴可以了解一下。下一篇文章，我们将介绍 Push API。刚开始学习PWA，以上内容有误之处，请小伙伴们多多指教。
### 参考资源
- [MDN - Notification](https://developer.mozilla.org/zh-CN/docs/Web/API/Notification)