引言
在上一节, 介绍了如何使用 Push API 进行服务端消息推送。提到 Push 就不得不说与其联系紧密的另一个 API——Notification API。它让我们可以在“网站外”显示消息提示：
即使当你切换到其他 Tab，也可以通过提醒交互来快速让用户回到你的网站；甚至当用户离开当前网站，仍然可以收到系统的提醒消息，并且可以通过消息提醒快速打开你的网站
Notification 的功能本身与 Push 并不耦合，你完全可以只使用 Notification API 或者 Push API 来构建 Web App的某些功能。因此，本文会先介绍如何使用 Notification API。然后，作为Notification的“黄金搭档”，本文还会介绍如何组合使用 Push & Notification（消息推送与提醒）
使用Notification API
获取提醒权限
在调用 Notification 相关API之前，需要先使用Notification对象上的静态方法Notification.requestPermission()来获取授权：
// 申请桌面通知权限
function requestNotificationPermission() {
// 系统不支持桌面通知
if (!window.Notification) {
return Promise.reject('系统不支持桌面通知')
}
return Notification.requestPermission().then(function (permission) {
if (permission === 'granted') {
return Promise.resolve()
}
return Promise.reject('用户已禁止桌面通知权限')
})
}
我们创建了一个requestNotificationPermission()方法来统一Notification.requestPermission()的调用形式，并在 Service Worker 注册完成后调用该方法。调用Notification.requestPermission()获取的permissionResult可能的值为：
- denied：用户拒绝了通知的显示
- granted：用户允许了通知的显示
- default：因为不知道用户的选择，所以浏览器的行为与denied时相同
chrome 中，可以在 chrome://settings/content/notifications 里进行通知的设置与管理
设置提醒内容
获取用户授权后，我们就可以通过registration.showNotification()方法进行消息提醒了
当我们注册完 Service Worker 后，then方法的回调函数会接收一个registration参数，通过调用其上的showNotification()方法即可触发提醒：
// 监听 push 事件
self.addEventListener('push', function (e) {
const { data } = e
if (!data) return
// 解析获取推送消息
let payload = data.json()
// 根据推送消息生成桌面通知并展现出来
let title = payload.title
let options = {
body: payload.body || '新消息',
icon: payload.icon || '/img/icons/book-128.png',
data: {
url: payload.url,
},
actions: [
{
action: 'browse',
title: '去看看',
},
{
action: 'contact-me',
title: '联系我',
},
],
tag: 'pwa-starter',
renotify: true,
}
let promise = self.registration.showNotification(title, options)
e.waitUntil(promise)
})
title用来设置该提醒的主标题，option 中则包含了一些其他设置
- body：提醒的内容
- icon：提醒的图标
- actions：提醒可以包含一些自定义操作
- tag：相当于是ID，通过该ID标识可以操作特定的 notification
- renotify：是否允许重复提醒，默认为 false。当不允许重复提醒时，同一个 tag 的 notification 只会显示一次
注: 由于不同浏览器中，对于 option 属性的支持情况并不相同。部分属性在一些浏览器中并不支持
捕获用户的点击
在上一部分中，我们已经为 Web App 添加了提醒功能。然而更多的时候，我们并不仅仅希望只展示有限的信息，更希望能引导用户进行交互。例如推荐一本新书，让用户点击阅读或购买。
在上一部分我们设置的提醒框中，包含了“去看看”和“联系我”两个按钮选项，那么怎么做才能捕获用户的点击操作，并且知道用户点击了哪个呢？
还记的上一部分里我们定义的 actions 么？
[
{
action: 'browse',
title: '去看看',
},
{
action: 'contact-me',
title: '联系我',
},
]
为了能够响应用户对于提醒框的点击事件，我们需要在 Service Worker 中监听notificationclick事件。在该事件的回调函数中我们可以获取点击的相关信息：
// 监听通知点击事件
self.addEventListener('notificationclick', function (e) {
console.log('用户点击: ', e.action)
})
e.action就是我们在showNotification()中定义的 actions 里的 action 属性, 可用它来判断用户点击的是什么
注: 当用户点击提醒本身时，也会触发
notificationclick，但是不包含任何 action 值，所以在代码中将其置于 default 默认操作中
消息推送与提醒
到目前为止，我们已经可以顺利得给用户展示提醒，并且在用户操作提醒后准确捕获到用户的操作。然而，还缺最重要的一步——针对不同的操作，触发不同的交互。例如：
- 点击“看一看”会跳转到对应页面
- 点击“联系我”会向应用管理者发邮件等等
// 监听通知点击事件
self.addEventListener('notificationclick', function (e) {
const { notification = {}, action } = e
const { data = {} } = notification
const { url = '' } = data
console.log('用户点击: ', action)
// 关闭窗口
e.notification.close()
// 打开网页
if (action === 'contact-me') {
e.waitUntil(clients.openWindow('mailto:shenxh0928@gmail.com'))
} else {
e.waitUntil(
// 获取所有clients
self.clients.matchAll().then(function (clientsList) {
// 切换到该站点的tab
clientsList &&
clientsList.length &&
clientsList[0].focus &&
clientsList[0].focus()
self.clients.openWindow(url)
}),
)
}
})
当用户点击提醒后，我们通过notificationclick监听，使用e.waitUntil(clients.openWindow(url))实现不同的操作
至此，一个比较简单的消息提醒（Notification）功能就完成了
兼容性
目前移动端浏览器普遍还不支持该特性，但是在 Mac OS 上的 safari 里面是支持该特性的，不过其调用方式与上文代码有些不太一样。在 safari 中使用 Web Notification 不是调用registration.showNotification()方法，而是需要创建一个 Notification 对象。
// 监听 push 事件
self.addEventListener('push', function (e) {
const { data } = e
if (!data) return
// 解析获取推送消息
let payload = data.json()
// 根据推送消息生成桌面通知并展现出来
let title = payload.title
let options = {
body: payload.body || '新消息',
icon: payload.icon || '/img/icons/book-128.png',
data: {
url: payload.url,
},
actions: [
{
action: 'browse',
title: '去看看',
},
{
action: 'contact-me',
title: '联系我',
},
],
tag: 'pwa-starter',
renotify: true,
}
let notification = new Notification(title, options)
notification.addEventListener('click', function (e) {
console.log(e)
})
})
本章分支: notification
