在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。 |
先看效果再看代碼:
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