Chrome notifications -- Chrome 瀏覽器消息通知中心

相關資料

官方開發者文檔: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

既然消息通知中心可以不依賴瀏覽器,那或許我們贏好好注意一下誰纔是真正的消息通知中心。


這只是一個消息提示:這是真正的消息中心:
wKioL1MHVTjh5Zk2AABNms_YpV4527.jpgwKiom1MHVXizjgs5AACJ738_uuw488.jpg


從外觀其實們不難看出來,真正的消息通知中心是和操作系統依託在一起的,而簡單的提示消息是簡單的建立在瀏覽器上的。所以我們這裏必須區分清楚什麼是消息通知中心,什麼是消息。

顯示消息和消息通知中心的條件:

(既然這樣特殊的功能已經和瀏覽器和系統掛鉤了,那他的存在就必須被限制在一個範圍內的)

        1.顯示消息的允許:用戶必須在安全提示中確認自己是否需要顯示該內容。


wKioL1MHVYWximJzAACUlZvFAys308.jpg

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.mozNotificationobject through itscreateNotificationmethod.

·Prior to Firefox 22 (Firefox OS<1.2), the Notification was displayed when calling theshowmethod and wassupporting theclickandcloseevents 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.originis 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.webkitNotificationsobject to instantiate a new notification.

·Prior to Chrome 32,Notification.permissionwas not supported.

Safari notes

·Safari started supportingnotification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章