欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

 
代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>html5桌面通知</title>    
  6. </head>    
  7. <body>    
  8. <input type="button" value="開啟桌面通知" onclick="showNotice();">    
  9. <script>    
  10. function showNotice(){    
  11. Notification.requestPermission(function(status){    
  12. //status默認(rèn)值'default'等同于拒絕 'denied' 意味著用戶不想要通知 'granted' 意味著用戶同意啟用通知    
  13. if("granted" != status)    
  14. return;    
  15. var notify = new Notification("消息",{    
  16. dir:'auto',    
  17. lang:'zh-CN',    
  18. tag:'sds',//實(shí)例化的notification的id    
  19. //icon 支持ico、png、jpg、jpeg格式    
  20. icon:'http://www.xttblog.com/icons/favicon.ico',//通知的縮略圖    
  21. body:'html5桌面通知' //通知的具體內(nèi)容    
  22. });    
  23. notify.onclick=function(){    
  24. //如果通知消息被點(diǎn)擊,通知窗口將被激活    
  25. window.focus();    
  26. }    
  27. });    
  28. }    
  29. </script>    
  30. </body>    
  31. </html> 

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

相關(guān)文章

最新評(píng)論