HTML5實現Notification API桌面通知功能

2020-03-24 16:40:30

字體：大中小

來源：轉載

供稿：網友

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

代碼如下：
XML/HTML Code復制內容到剪貼板
body inputtype= button value= 開啟桌面通知 onclick= showNotice(); script functionshowNotice(){ Notification.requestPermission(function(status){ //status默認值'default'等同于拒絕'denied'意味著用戶不想要通知'granted'意味著用戶同意啟用通知 if( granted !=status) return; varnotify=newNotification( 消息 ,{ dir:'auto', lang:'zh-CN', tag:'sds',//實例化的notification的id //icon支持ico、png、jpg、jpeg格式 icon:'http://www.xttblog.com/icons/favicon.ico',//通知的縮略圖 body:'html5桌面通知'//通知的具體內容 }); notify.onclick=function(){ //如果通知消息被點擊,通知窗口將被激活 window.focus(); } }); } /script /body /html
以上內容是小編給大家分享的HTML5實現Notification API桌面通知功能，希望對大家有所幫助！
原文：http://www.xttblog.com/?p=249html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5 新標簽全部總匯(推薦)

下一篇：HTML多表頭表格代碼