H5操作浏览器桌面通知：Notification API

Notification API：

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

通俗易懂的说明: Notification API 是HTML5新增的桌面通知功能，开发者可以在浏览器不关闭并且用户同意通知的前提下向桌面发送通知

win10效果（本人win10系统）：

构造方法

let notification = new Notification(title, options)

参数

title

一定会被显示的通知标题

options（可选）

一个被允许用来设置通知的对象。它包含以下属性

dir：文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。

兼容性

pc端兼容性还好（除了ie），移动端几乎都不支持，所以Notification api 一般不会使用在手机端

Notification桌面通知封装

export default class AppNotificationHandler {
  isNotificationSupported: boolean;
  isPermissionGranted: boolean = false;

  constructor() {
    //浏览器是否支持Notification api
    const isNotificationSupported = 'Notification' in window;
    this.isNotificationSupported = isNotificationSupported;
    //用户是否同意接受通知
    if (isNotificationSupported) {
        this.isPermissionGranted = Notification.permission === 'granted';
    }
  }

  //请求开启系统通知功能
  async requestPermission(): Promise<void> {
    const {isNotificationSupported} = this;
    if (!isNotificationSupported) {
      throw ('当前浏览器不支持 Notification API');
    }
    const permission = await Notification.requestPermission();
    if (permission  === 'granted') {
      this.isPermissionGranted = true;
    };
  }

  //打开系统通知功能（具体事件绑定由用户自定义）
  openNotification(title: string, options: NotificationOptions): Notification {
    const {isNotificationSupported, isPermissionGranted} = this;
    if (!isNotificationSupported) {
      throw ('当前浏览器不支持Notification API');
    }
    if (!isPermissionGranted) {
      throw ('当前页面通知未开启');
    }
    return new Notification(title, options)
  }
}

实战使用

1.生成AppNotificationHandler实例

    const appNotificationHandler = new AppNotificationHandler();

2.请求用户开启系统通知功能

    appNotificationHandler.requestPermission();

3.发送通知

    const notice = appNotificationHandler.openNotification('测试通知', {
         body: '来通知了，快去查看吧',
         tag: 'linxin',
         icon: 'https://www.wangjie818.wang/upload/微信图片_20190619140215.jpg',
    })

4.弹窗包含事件

        //消息框显示时被调用  
        notice.onshow = function() {  
            console.log('notification is shows up');  
        };  

        //消息框被点击时被调用  
        notice.onclick = function() {  
            console.log('notification is click');  
        };  

        //当有错误发生时会onerror函数会被调用  
        //如果没有granted授权，创建Notification对象实例时，也会执行onerror函数  
        notice.onerror = function() {  
            console.log('notification is an error');  
        };  

        //一个消息框关闭时onclose函数会被调用  
        notice.onclose = function() {  
            console.log('notification is closed');  
        };

总结

Notification api发送桌面通知还是挺方便的，公司内部管理系统是可以适当搭配使用的。如果是对外用户流量大的还是不推荐使用，毕竟webscoket是可以实现网页内实时通知的，并且可以自己随意定制化。

个人博客地址，有兴趣的可以看一看

pc端

mobile端