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;

  constructor() {
    //浏览器是否支持Notification api
    this.isNotificationSupported = 'Notification' in window;
    //用户是否赞成接受通知
    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是能够实现网页内实时通知的，而且能够本身随意定制化。

我的博客地址，有兴趣的能够看一看