【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

你可能感兴趣的:(【PWA学习】5. 使用 Notification API 来进行消息提醒)