web系列之Web Notifications

1. 什么是Web Notifications

是一种允许网站或应用发送信息到用户设备的技术，不仅可以提高用户互动度，还可以及时推送信息，从而增强网站或应用的用户体验。

2. 用法

2.1 基本流程

Notifications API 允许网页控制向最终用户显示系统通知 ---这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。

在支持该接口的平台上，显示一个系统通知通常涉及两件事。

用户需要授予当前源的权限以显示系统通知:
1. 这通常在应用或站点初始化时，使用Notification.requestPermission() 方法来完成。
2. 从这里，用户可以选择允许来自此来源的通知，阻止来自此来源的通知，或不选择此点。一旦做出选择，该设置通常将持续用于当前会话。

三种状态：

使用 Notification() 构造函数创建一个新通知:
1. 这个方法可以传入两个参数。这必须传递一个标题参数，并可以选择性地传递一个选项对象来指定选项，如文本方向，正文，显示图标，通知声音播放，等等。

常见的配置项属性：

这些属性是创建通知时可以设置的选项，可以用于控制通知的各个方面，具体含义如下：

actions：一个数组，表示通知上的自定义操作按钮；
badge：将显示在通知区域中的图标；
body：通知的正文内容；
data：与通知相关的数据，可在打开通知时使用；
dir：显示通知文本的方向，可以是 "ltr"（从左到右）或者 "rtl"（从右到左）；
icon：将用作通知图标的 URL；
image：在通知上显示的图像的 URL；
lang：通知的语言，如 "en-US" 或者 "zh-CN"；
renotify：如果通知已经存在，是否应该替换它而不是创建一个新的通知；
requireInteraction：如果通知被创建时正在运行可见的浏览器窗口，则需要用户手动关闭通知；
silent：不要以声音或震动的方式通知用户；
tag：与通知相关的标识符

2.2 使用案例

js 复制代码

const pushNotificationMsg = async () => {
  // 先检查浏览器是否支持 Notification
  if (!window.Notification || Notification.permission === 'denied') {
    console.log('浏览器不支持或者没有权限')
    return false
  }
  // 检查用户是否已经同意接收通知
  // granted：已授权  default：未被询问授权  denied：已拒绝
  if (Notification.permission === 'granted') {
    // 显示通知
    new Notification('更新提示', {
      icon: require('../assets/img/main_icon.png'), // 替换成自己的图片
      body: '版本有更新，是否刷新页面！',
    })
  }

  if (Notification.permission === 'default') {
    // 获取权限
    await Notification.requestPermission()
    pushNotificationMsg()
  }
}

3. 总结

Web Notifications 是一种允许网站或应用发送信息到用户设备的技术。

使用 Notifications API 显示系统通知通常需要两个步骤：

一是用户需要授予当前源的权限以显示系统通知，使用 Notification.requestPermission() 方法完成；
二是使用 Notification() 构造函数创建一个新通知，可以选择性地传递一个选项对象来指定选项，如文本方向，正文，显示图标，通知声音播放等等。

在实际使用中，还需要考虑兼容性问题。