Web Notification

時間 2019-11-08

原文原文鏈接

在OS X 10.8 Mountain Lion系統上，經過Safari訪問的頁面可以發送通知到系統右邊欄通知中心，通知（Notification）是經過WebKit Notification 對象發出的，這也是W3C標準實現的一部分。html

來自Safari的通知能夠在系統偏好設置的「通知」面板內進行設置，有些用戶可能但願Safari的通知以提示框（alert）的形式在屏幕上停留一下子而後再消失，有些人可能就不想在屏幕上顯示。另外，用戶能夠在Safari偏好設置的通知面板內對單個網站（域名）的消息進行設定（Allow or Deny）。git

因爲用戶能夠設置將你的通知給屏蔽掉，因此你應該確保提示的通知是提示性的信息而不是很是重要的信息。github

請求容許

提示：當你要實現帶通知功能的插件時，你不須要檢查用戶許可級別，由於用戶主動的安裝插件，默認的許可級別就是容許(granted)。web

由於網站的訪問者可能運行的是其餘系統，發通知前你須要先檢查他們的瀏覽器是否支持，能夠經過檢查window.Notification對象是否認義。瀏覽器

若是window.Notification對象確實有定義，你能夠繼續經過permission屬性來檢查用戶對你網站消息的許可級別，一共有三種級別：併發

default: 用戶尚未設置是否容許來自當前域名的通知。
granted: 用戶容許來自當前域名的通知。
denied: 用戶拒絕來自當前域名的通知。

若是permission級別是default，說明你的網站尚未請求過讓用戶容許發送通知，因此你須要調用requestPermission()方法，這時Safari會彈出提示請求用戶容許，若是用戶容許，會調用你做爲參數傳入的回調方法。dom

建立併發送通知

建立一個消息對象：網站

var n = new Notification(in String title, {in Object options});

除了title做爲必須參數之外，還能夠做爲options對象傳入有：this

body: 通知的內容
tag: 通知的惟一標示，避免在通知中心中重複顯示通知。

若是有多個消息會以隊列的形式排列，只有當前面沒有消息時纔會顯示。通知的副標題一般是消息來源的域名或者插件名，圖標就是Safari應用的圖標。spa

提示：經過網站發送通知並無頻率限制，爲了避免至於打擾用戶，確保只在必要的時候才發通知信息。

通知會一直留在通知中心，直到用戶在通知中心清除因此來自Safari的通知或者關掉當前網站頁面。能夠調用close()方法關掉某條消息，或者你願意的話，可讓用戶在點擊通知提示框時就將通知清除，你只須要在onclick()事件處理中調用close()方法，除了onclick()，還有其餘一些可用事件：

事件	描述
onshow	當通知在屏幕上顯示的時候會被調用。
onclick	用戶點擊通知提示框的時候會被調用，默認狀況下點擊通知提示框會顯示消息來源的界面（網站），即便有另外一個程序在前臺（顯示）。
onclose	通知消失的時候會被調用，主動調用close()也會觸發onclose()事件。
onerror	當通知不能展示給用戶的時候會被調用，如當前用戶容許級別是denied或default。

先看效果再看代碼：

【Code on Github】

var notify = function() {
    // check for notification compatibility
    if(!window.Notification) {
        // if browser version is unsupported, be silent
        return;
    }
    // log current permission level
    console.log(Notification.permission);
    // if the user has not been asked to grant or deny notifications from this domain
    if(Notification.permission === 'default') {
        Notification.requestPermission(function() {
            // callback this function once a permission level has been set
            notify();
        });
    }
    // if the user has granted permission for this domain to send notifications
    else if(Notification.permission === 'granted') {
        var n = new Notification(
                    '1 new friend request',
                    {
                      'body': 'Jill would like to add you as a friend',
                      // prevent duplicate notifications
                      'tag' : 'unique string'
                    }
                );
        // remove the notification from Notification Center when it is clicked
        n.onclick = function() {
            this.close();
        };
        // callback function when the notification is closed
        n.onclose = function() {
            console.log('Notification closed');
        };
    }
    // if the user does not want notifications to come from this domain
    else if(Notification.permission === 'denied') {
        // be silent
        return;
    }
};