Web Notification

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

Notification Center

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

System Notification Setting

Safari Notification Setting

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

請求容許

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

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

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

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

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

Request Permission

建立併發送通知

建立一個消息對象:網站

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

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

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

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

Notification

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

通知會一直留在通知中心,直到用戶在通知中心清除因此來自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;
    }
};

結束

如今通知還不是很普及,W3C和HTML5貌似也在作這方面推廣,Google Chrome好像也支持一種通知機制叫作webkitNotification,相信後面會愈來愈普及。這種原生的通知比起用JQuery各類插件作出來的體驗仍是要好不少,因此若是能合理利用,必定會爲網站增色很多。

Posted by TracyYih - Aug 22 2013
如需轉載,請註明: 本文來自 Esoft Mobile

相關文章
相關標籤/搜索