相關資料
官方開發者文檔:http://developer.chrome.com/apps/notifications
*Mozilla簡單列子:https://developer.mozilla.org/en-US/docs/WebAPI/Using_Web_Notifications
*Mozilla API文檔:https://developer.mozilla.org/en-US/docs/Web/API/Notification
Demo:http://jsfiddle.net/dandv/wT26x/1/
WiKi:https://github.com/samdutton/simpl/blob/master/notification/index.html
簡單教程(Chrome 28後不適用):http://www.html5rocks.com/en/tutorials/notifications/quick/
Html5簡單Demo(這個地址無關緊要):http://simpl.info/
時間通知:http://www.itzhai.com/chrome-plugin-development-examples-time-notification-notifications.html
Bolg (Chrome 28後不適用):http://www.1990c.com/?p=833
基本介紹
ChromeNotifications 是一個豐富了web界面向用戶提供實時的郵件,消息等提醒的消息通知中心。
ChromeNotifications 功能在版本28之前是需要通過帶有前綴webkit才能實現,而版本28後,Chrome 正式支持了Chrome Notifications,這時的Chrome Notifications已經不需要webkit這個前綴了,同時也是穩定的一個版本,這個時候的消息通知中心不僅可以顯示文字列表和圖片等內容,用戶也可以直接操作他,此外Chrome Notifications並不是完全依賴與瀏覽器自身的,在用戶允許的條件下,即使瀏覽器未打開也能接收相應的消息。
(以上具體版本號爲:28.0.1500.95,內容來源http://en.wikipedia.org/wiki/Google_Chrome)
既然消息通知中心可以不依賴瀏覽器,那或許我們贏好好注意一下誰纔是真正的消息通知中心。
這只是一個消息提示: | 這是真正的消息中心: |
從外觀其實們不難看出來,真正的消息通知中心是和操作系統依託在一起的,而簡單的提示消息是簡單的建立在瀏覽器上的。所以我們這裏必須區分清楚什麼是消息通知中心,什麼是消息。
顯示消息和消息通知中心的條件:
(既然這樣特殊的功能已經和瀏覽器和系統掛鉤了,那他的存在就必須被限制在一個範圍內的)
1.顯示消息的允許:用戶必須在安全提示中確認自己是否需要顯示該內容。
Javascript獲取消息通知的返回權限級別
Notification.permission:消息通知權限(這表明了你是否允許顯示消息通知)
value:
granted:同意接受消息通知
denied:拒絕接收消息通知
default:默認拒絕接受消息通知
2.顯示消息通知中心的允許:用戶必須在瀏覽器中設置自己是否需要消息通知中心這樣一個功能。(默認啓用)
通過瀏覽器地址chrome://flags/進入實驗性功能狀態管理頁面,通過其中的”啓用豐富通知”一項進行設置。
基本使用方法
Example 01:(具體可以參見相關資料中的Chrome 3後的開發文檔(mozilla))
1.判斷用戶是否允許接受消息通知(一般可以不用判斷,因爲只有用戶允許的條件下消息通知纔可能顯示)
if (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; } }); }
2.創建簡單的消息通知
var options = { dir: "rtl", lang: "zh-CN", body: "dfg", icon: "http://i.stack.imgur.com/dmHl0.png", // tag:"msgId", } var n = new Notification("title", options);
瀏覽器兼容性
Gecko notes
·Prior to Firefox 22 (Firefox OS<1.2), the instantiation of a new notification must be done with thenavigator.mozNotification
object through itscreateNotification
method.
·Prior to Firefox 22 (Firefox OS<1.2), the Notification was displayed when calling theshow
method and wassupporting theclick
andclose
events only.
·Nick Desaulniers has written aNotificationshimto cover both newer and older implementations.
·One particular Firefox OS issueis that you canpassa path to an iconto use in thenotification, but if the app is packaged you cannot use a relative path like/my_icon.png
. You also can't usenavigator.location.origin + "/my_icon.png"
becausenavigator.location.origin
is null in packaged apps. Themanifestorigin fieldfixes this, but it isonly available in Firefox OS 1.1+. A potential solution for supporting FirefoxOS <1.1 is topassan absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayedimmediately with the icon missing, then the icon is fetched, but it works onall versions of Firefox OS.
Chrome notes
·Prior to Chrome 22, the supportfor notification was following anoldprefixed version of the specificationand was using thenavigator.webkitNotifications
object to instantiate a new notification.
·Prior to Chrome 32,Notification.permission
was not supported.
Safari notes
·Safari started supportingnotification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).