桌面提醒的介紹

桌面通知功能能夠讓瀏覽器即使是最小化狀態(tài)也能夠?qū)⑾⑼ㄖo用戶。這和WebIM是最為天然的結(jié)合。彈出來的內(nèi)容只能是文本，暫不支持HTML。

Notification桌面提醒功能的好處

傳統(tǒng)的桌面通知可以寫一個(gè)div放到頁面右下角自動彈出來，并通過輪詢等等其他方式去獲取消息并推送給用戶。這種方式有個(gè)弊端就是：當(dāng)我在使用京東 進(jìn)行購物的時(shí)候，我是不知道人人網(wǎng)有消息推送過來給我的，而必須要等我把當(dāng)前頁面切到人人網(wǎng)才知道有消息推送了。這種方式的消息推送它是基于頁面存活的， 但是我們需要這么一種策略：無論你在看哪個(gè)頁面，只要有消息都應(yīng)該能推送給我看到，這就是Notification要解決的問題。

Notification生成的消息不依附于某個(gè)頁面，僅僅依附于瀏覽器。

Notification使用注意事項(xiàng)

在實(shí)際使用的過程中，應(yīng)該盡量減少通知功能對用戶的干擾，最大程度的減少通知功能的出現(xiàn)，這就需要解決一下幾個(gè)問題：

1.收到多條消息時(shí)確保只出現(xiàn)一條通知

2.當(dāng)用戶處于IM出現(xiàn)的頁面中時(shí)(頁面處于foucus狀態(tài))，不出現(xiàn)通知

3.當(dāng)用戶使用多tab開啟多個(gè)存在IM的頁面時(shí)，只要有一個(gè)頁面處于focus狀態(tài)將不出現(xiàn)通知

4.如何讓用戶點(diǎn)擊通知浮動層即可定位到具體的聊天窗口

5.還需要解決一個(gè)便利性的問題

Notification桌面提醒生成的正常流程

1.檢查瀏覽器是否支持Notification

2.檢查瀏覽器的通知權(quán)限(是否允許通知)

3.若權(quán)限不夠則獲取瀏覽器的通知權(quán)限

4.創(chuàng)建消息通知

5.展示消息通知

桌面提醒Notification的API

在chrome26+開發(fā)工具console終端里面輸入Notification并鍵入回車鍵，會發(fā)現(xiàn)這東西它也是存在的。

構(gòu)造函數(shù)

Notification(title,?options)

//@param?{String}?title?要顯示的通知標(biāo)題

//@param?{Object}?options?備選項(xiàng)參數(shù)，鍵值對

//option?結(jié)構(gòu)如下

dictionary?NotificationOptions?{

NotificationDirection?dir?=?"auto";

DOMString?lang?=?"";

DOMString?body;

DOMString?tag;

DOMString?icon;//在實(shí)例化的時(shí)候會異步的去獲取

};

//新建一個(gè)Notification實(shí)例,并根據(jù)permission為'granted'來完成notification的顯示

var?notification?=?new?Notification('Hello?Notification',{body:"I'm?an?enginneer!"});

屬性

靜態(tài)屬性

Notification.permission

見到很多博客文章里都是Notification.Permission,P大寫，結(jié)果console端口敲入大寫的Permission結(jié)果為undefined，應(yīng)該為小寫的p：Notification.permission

'default' 等同于拒絕 'denied' 意味著用戶不想要通知 'granted' 意味著用戶同意啟用通知

Test:在chrome的地址欄里面輸入http://www.baidu.com, 打開console，并在里面輸入Notification.permission 默認(rèn)返回的是'default'.

Notes:該屬性是只讀的不能手動修改

//在百度的首頁打開console

Notification.permission?=?'granted'

Notification.permission???//'default

'

實(shí)例屬性

以下屬性都需要在Notification實(shí)例上才能訪問，為只讀屬性，并且就是通過option來賦值

Notification.dir????//

Notification.lang

Notification.Body???//通知的具體內(nèi)容

Notification.tag????//實(shí)例化的notification的id

Notification.icon???//通知的縮略圖

方法

靜態(tài)方法

Notification.requestPermission()

//該方法將會詢問用戶是否允許顯示通知,該方法不能由頁面自主調(diào)用，必須由用戶主動事件觸發(fā)，還是以百度的頁面為例，百度的搜索框的id為'kw'：

//不通過事件觸發(fā)直接調(diào)用

Notification.requestPermission()

//頁面無反應(yīng)

Javascript?//通過用戶主動事件觸發(fā)來調(diào)用

document.getElementById('kw').οnclick=function(){?Notification.requestPermission();?};

//頁面信息欄會彈出詢問用戶是否允許顯示桌面通知

Notes:當(dāng)用戶同意之后，再次調(diào)用該方法則無效，即該方法僅對Notification.Permission不為'granted'的時(shí)候起作用

實(shí)例方法

Notification.close()????//該方法允許通過代碼控制關(guān)掉notification

Notes:?Notification?沒有實(shí)例方法show(),在Notification實(shí)例化的時(shí)候，瀏覽器就已經(jīng)自動的去處理notification的顯示過程了。

示例代碼

html>

HTML5?Notification桌面提醒

document.getElementById('notifyButton').onclick?=?function?()?{

if?(window.Notification){

//console.log(Notification.permission);

if(Notification.permission==='granted'){

var?options={

body:"歡迎來到我的站：http://www.jzcoder.com",

icon:"Notification.jpg"

};

var?notification?=?new?Notification('jzcoder.com歡迎您',options);

//3秒后自動關(guān)閉

notification.onshow?=?function?()?{

setTimeout(function?()?{

notification.close();

},?3000);

};

}else?{

document.getElementById('requestButton').onclick?=?function?(){

Notification.requestPermission();

};

};

}else?alert('你的瀏覽器不支持此特性，請下載谷歌瀏覽器試用該功能');

};

結(jié)果如下圖：

總結(jié)

以上是生活随笔為你收集整理的html5 桌面提醒参数,[HTML5]Notification桌面提醒功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。