【PWA学习】5. 使用 Notification API 来进行消息提醒

引言

在上一节, 介绍了如何使用 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:[email protected]'))
  } 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）功能就完成了

兼容性

看一下Web Notification 兼容性：

Web 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