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

1,462 阅读5分钟

前言

在很多场景下,需要一种通知的交互方式来提醒用户,传统方式下可以在页面实现一个 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
  }
});

兼容性


博客名称:王乐平博客

CSDN博客地址:blog.csdn.net/lecepin

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。