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

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

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

Notifications

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

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

流程：

构造器

语法：

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
  }
});
复制代码