這期內容當中小編將會給大家?guī)碛嘘P如何進行html5中Notifycations應用，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)主營平陽網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶App定制開發(fā),平陽h5小程序制作搭建,平陽網(wǎng)站營銷推廣歡迎平陽等地區(qū)企業(yè)咨詢

HTML5中的桌面提醒（web notifications）可以在當前頁面窗口彈出一個消息框，這個消息框是跨 Tab 窗口的，這在用戶打開多個 tab 瀏覽網(wǎng)頁時，提醒比較方便，容易讓用戶看到。目前只要是 webkit 內核支持該功能。
該功能在 chrome 下需要以 http 方式打開網(wǎng)頁才能啟用。
桌面提醒功能由 window.webkitNotifications 對象實現(xiàn)（webkit內核）。
window.webkitNotifications 對象沒有屬性，有四個方法：
1.requestPermission()
該方法用于向用戶申請消息提醒權限，如果當前沒有開放該權限，瀏覽器將彈出授權界面，用戶授權后，在對象內部產(chǎn)生一個狀態(tài)值（一個0、1或 2 的整數(shù)）：
0：表示用戶同意消息提醒，只在該狀態(tài)下可以使用信息提醒功能；
1：表示默認狀態(tài)，用戶既未拒絕，也未同意；
2：表示用戶拒絕消息提醒。
2.checkPermission()
　　這個方法用于獲取 requestPermission() 申請到的權限的狀態(tài)值。
3.createNotification()
這個方法以純消息的方式創(chuàng)建提醒消息，它接受三個字符串參數(shù)：
iconURL：在消息中顯示的圖標地址,
title：消息的標題，
body：消息主體文本內容
該方法會返回一個 Notification對象，可以針對這個對象做更多的設置。
Notification 對象的屬性與方法：

代碼如下:

dir: ""
onclick: null
onclose: null
ondisplay: function (event) {
onerror: null
onshow: null
replaceId: ""
tag: ""
__proto__: Notification
addEventListener: function addEventListener() { [native code] }
cancel: function cancel() { [native code] }
close: function close() { [native code] }
constructor: function Notification() { [native code] }
dispatchEvent: function dispatchEvent() { [native code] }
removeEventListener: function removeEventListener() { [native code] }
show: function show() { [native code] }
__proto__: Object

dir：設置消息的排列方向，可取值為“auto”(自動), “l(fā)tr”(left to right), “rtl”(right to left)。
tag：為消息添加標簽名。如果設置此屬性，當有新消息提醒時，標簽相同的消息只顯示在同一個消息框，后一個消息框會替換先前一個，否則出現(xiàn)多個消息提示框，但是最多值顯示3個消息框，超過3個，后繼消息通知會被阻塞。
onshow：當消息框顯示的時候觸發(fā)該事件；
onclick： 當點擊消息框的時候觸發(fā)該事件；
onclose：當消息關閉的時候觸發(fā)該事件；
onerror：當出現(xiàn)錯誤的時候觸發(fā)該事件；
方法：
addEventListener && removeEventListener：常規(guī)的添加和移除事件方法；
show：顯示消息提醒框；
close：關閉消息提醒框；
cancel：關閉消息提醒框，和 close一樣；
4.createHTMLNotification()
該方法與 createNotification() 不同的是，他以HTML方式創(chuàng)建消息，接受一個參數(shù)： HTML 文件的URL，該方法同樣返回 Notification對象。
一個實例：

代碼如下:

上述就是小編為大家分享的如何進行html5中Notifycations應用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。