PWA(Progressive Web App)入门系列：Notification

2024-02-27 15:42:45

前言

在很多场景下，需要一种通知的交互方式来提醒用户，传统方式下可以在页面实现一个 Dialog，或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足，在网页最小化的情况下，无法查看任何通知，导致用户无法及时获取通知信息。

给力的 W3C 推出了 Notifications API，专注于 WEB 的通知。

Notifications

Notifications API 的 Notification 界面用于配置和显示用户的桌面通知。这些通知的外观和特定功能因平台而异，但通常它们提供了一种向用户异步提供信息的方法。

此 API 在 WebWorker 环境下也可以使用。
注意：此 API 必须运行在 https 环境下，非 https 环境无法授权。

流程：

PWA(Progressive Web App)入门系列：Notification

构造器

语法：

var myNotification = new Notification(title, options);

参数：

title：DOMString，定义通知的标题，该标题在触发时将显示在通知窗口的顶部。
options：
- actions：NotificationActions 数组，表示在显示通知时用户可用的操作。这些是用户可以选择的选项，以便在通知本身的上下文中对该动作起作用。操作的名称将发送到服务工作者通知处理程序，以使其知道用户已选择的操作。数组的成员应该是对象文字。它可能包含以下值：（注意：此属性只在 serviceWorker 环境下有效。click 时可以通过 event.action 来获取）
  - action：DOMString，显示在通知上的 action 标志。
  - title：DOMString，显示在通知上的 action 标题。
  - icon：USVString，显示在 action 上的 icon URL。
- badge：包含图像 URL 的U SVString，用于在没有足够空间显示通知本身时表示通知，例如 Android Notification Bar。在 Android 设备上，徽章应能容纳高达4倍分辨率的设备，大约 96 x 96 像素，并且图像将自动屏蔽。
- body：表示要在通知中显示的额外内容的字符串。
- data：希望与通知关联的任意数据。这可以是任何数据类型，通event.currentTarget.data 来获取。
- dir：显示通知的方向。它默认为 auto，它只采用浏览器的语言设置行为，但你可以通过设置 ltr 和 rtl 的值来覆盖该行为（尽管大多数浏览器似乎忽略这些设置。）
- icon：USVString，包含要在通知中显示的图标的URL。
- lang：指定通知中使用的 lang。此字符串必须是有效的 BCP 47 语言标记。
- renotify：Boolean，指定在新通知替换旧通知后是否应通知用户。默认值为false，表示不会通知他们。
- requirInteraction：表示通知应保持活动状态，直到用户单击或关闭它，而不是自动关闭。默认值为 false。必须带 tag 才有效果。
- silent：无论设备设置如何，都应该发出一个布尔值，指定通知是否应该是静音，即不应发出声音或振动。默认值为 false，这意味着它不会是静默的。
- tag：给定通知的 ID，允许您在必要时使用脚本查找，替换或删除通知。
- timestamp：DOMTimeStamp 表示创建通知的时间。它可用于指示通知实际的时间。例如，这可能是在过去，当通知用于因设备离线而无法立即传递的消息时，或将来用于即将开始的会议时间。
- vibrate：与通知显示一起运行的振动模式。振动模式可以是具有少至一个成员的阵列。值是以毫秒为单位的时间，其中偶数索引（0,2,4等）表示振动多长时间，奇数索引表示暂停多长时间。例如，[300,100,400] 将振动 300ms，暂停 100ms，然后振动 400ms。

属性

静态属性：

permission：Notification.permission ，获取当前用户对通知的权限。值：
- granted：用户已授权显示系统通知。
- denied：用户已拒绝显示系统通知。
- default：用户未做决定，程序表现为拒绝。

实例属性：（含义同构造器中的 option）

actions
badge
body
data
dir
lang
tag
icon
image
renotify
requireInteraction
silent
timestamp
vibrate

事件

onclick

点击显示通知框时触发的事件。

Notification.onclick = function(event) { ... };

可以通过 preventDefault() 阻止焦点显示到 notification 打开的 tab 上。
通过 event.currentTarget 来获取属性。

onclose

通知关闭时，触发此事件。
必须调用 Notification.close() 才能触发此事件。

Notification.onclose = function() { ... };

onerror

用作错误事件的事件处理程序。发生错误时，将调用指定的函数。如果为null，则没有错误处理程序生效。

Notification.onerror = EventListener;

onshow

通知出现的时候，触发此事件。

Notification.onshow = function() { ... };

方法

静态方法：

requestPermission()：请求通知权限。返回 Promise，类型为 Notification.permission。

当前 permission 为 default 时，出现授权通知：

注意：在 PC 中，当出现授权通知时，如果不做任何选择，而是点击右上角的关闭x，连续三次这种操作后，系统会自动设置为 denied。

当前 permission 为 granted 时，直接返回 Promise，执行 then 后的代码。后续不需要在申请权限。

当前 permission 为 denied 时，直接返回 Promise，执行 catch 后面的代码。后续一直是拒绝状态，不再弹出授权框。此时 serviceWorker pushManager 不可用，订阅会抛出错误。此状态下，只能通过用户自己去修改权限。

实例方法：

close()：Notification 实例调用，关闭通知，触发 onclose 事件。

实例

点击通知打开指定页面

Notification.requestPermission().then(() => {
  var n = new Notification('天气预报', {
    body: '今天天气晴朗，详情请点击~',
    icon: 'https://img.alicdn.com/tfs/TB1XPvwUVzqK1RjSZFvXXcB7VXa-1024-1024.png',
    requireInteraction: true,
    data: {
      nav: 'https://baidu.com'
    }
  });
  
  n.onclick = event => {
    n.close();
    
    if(event.currentTarget.data.nav) {
      window.open(event.currentTarget.data.nav);
    }
  };
}).catch(() => {
  alert('通知权限已禁止，请设置打开权限');
})

通知按钮交互

actions 必须在 serviceWorker 中使用。

navigator.serviceWorker.ready.then(swReg => {
  Notification.requestPermission().then(() => {
    swReg.showNotification('好友请求', {
      body: '美女向你打招呼~',
      icon: 'https://img.alicdn.com/tfs/TB1qyPtU3HqK1RjSZFEXXcGMXXa-640-859.png',
      requireInteraction: true,
      actions: [{
        action: 'yes',
        title: '加好友',
      }, {
        action: 'no',
        title: '拒绝'
      }]
    });
  })
})

sw 环境处理代码：

self.addEventListener("notificationclick", function(event) {
  console.log("notificationclick", event);
  event.notification.close();
  
  if(event.action == 'yes') {
    // ***
  } else if(event.action == 'no') {
    // xxx
  }
});