武道至尊帝临小说,好看的言情小说

主頁 > 知識庫 > HTML5實現(xiàn)Notification API桌面通知功能

HTML5實現(xiàn)Notification API桌面通知功能

為什么需要HTML5的桌面通知
傳統(tǒng)的桌面通知可以寫一個div放到頁面右下角自動彈出來，并通過輪詢等等其他方式去獲取消息并推送給用戶。這種方式有個弊端就是：當(dāng)我在使用京東進(jìn)行購物的時候，我是不知道人人網(wǎng)有消息推送過來給我的，而必須要等我把當(dāng)前頁面切到人人網(wǎng)才知道有消息推送了。這種方式的消息推送它是基于頁面存活的，但是我們需要這么一種策略：無論你在看哪個頁面，只要有消息都應(yīng)該能推送給我看到，這就是webkitNotification要解決的問題。 Notification生成的消息不依附于某個頁面，僅僅依附于瀏覽器。
一個桌面通知生成的正常流程
我們先來看看一個桌面通知是如何生成的：
1.檢查瀏覽器是否支持Notification
2.檢查瀏覽器的通知權(quán)限（是否允許通知）
3.若權(quán)限不夠則獲取瀏覽器的通知權(quán)限
4.創(chuàng)建消息通知
5.展示消息通知
NOTE:關(guān)于第一點的說明需要做一些說明，Notification目前還沒有標(biāo)準(zhǔn)化，所以目前只支持chrome19+和safari6+；網(wǎng)上有資料顯示Firefox26+也支持，但是我拿我的Firefox27檢測的結(jié)果是無法支持。
html5的桌面通知我相信大家并不陌生。常見的有網(wǎng)頁版的微信等應(yīng)用，需要設(shè)置桌面通知功能才可以使用。
用客戶端程序?qū)崿F(xiàn)這樣的功能并不難。而傳統(tǒng)的網(wǎng)頁版的桌面通知可以寫一個div放到頁面右下角自動彈出來，并通過輪詢等等其他方式去獲取消息并推送給用戶。這種方式有個弊端就是：當(dāng)我在使用淘寶進(jìn)行購物的時候，我是不知道微博有消息推送過來給我的，而必須要等我把當(dāng)前頁面切到新浪微博才知道有消息推送了。這種方式的消息推送它是基于頁面存活的，但是我們需要這么一種策略：無論你在看哪個頁面，只要有消息都應(yīng)該能推送給我看到，這就是webkitNotification要解決的問題。
Notification目前還沒有標(biāo)準(zhǔn)化，所以你在w3cschool等網(wǎng)站上是學(xué)習(xí)不到的。但是目前主流瀏覽器大部分都支持Notification。關(guān)于html5的桌面通知效果圖如下：

代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5桌面通知</title>
</head>
<body>
<input type="button" value="開啟桌面通知" onclick="showNotice();">
<script>
function showNotice(){
Notification.requestPermission(function(status){
//status默認(rèn)值'default'等同于拒絕 'denied' 意味著用戶不想要通知 'granted' 意味著用戶同意啟用通知
if("granted" != status)
return;
var notify = new Notification("消息",{
dir:'auto',
lang:'zh-CN',
tag:'sds',//實例化的notification的id
//icon 支持ico、png、jpg、jpeg格式
icon:'http://www.xttblog.com/icons/favicon.ico',//通知的縮略圖
body:'html5桌面通知' //通知的具體內(nèi)容
});
notify.onclick=function(){
//如果通知消息被點擊,通知窗口將被激活
window.focus();
}
});
}
</script>
</body>
</html>

以上內(nèi)容是小編給大家分享的HTML5實現(xiàn)Notification API桌面通知功能，希望對大家有所幫助！
原文：http://www.xttblog.com/?p=249

標(biāo)簽：營口蘇州甘南文山咸陽惠州萍鄉(xiāng) 紅河

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5實現(xiàn)Notification API桌面通知功能》，本文關(guān)鍵詞 HTML5,實現(xiàn),Notification,API,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

HTML5實現(xiàn)Notification API桌面通知功能