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是能夠實現網頁內實時通知的，而且能夠本身隨意定製化。

我的博客地址，有興趣的能夠看一看