桌面訊息通知 HTML5 Notification

2022-01-16 09:26:34 字數 760 閱讀 3786

使用場景  常見的大多適用於提示使用者有新的未讀訊息,一系列推送廣告/系統更新訊息等......

知道了使用場景後, 接著先上一段完整**

1

//註冊許可權

2notification.requestpermission(function (status)

7});8//

訊息推送

9var n = new notification('

部落格更新提示

',)

開啟chrome瀏覽器,f12執行效果如下 (針對上述**,下面逐一展開說明)

請求許可權 requestpermission

notification.requestpermission(function (status) 

});

檢查當前許可權狀態(檢視你是否已經有許可權)  notification.permission 該屬性的值將會是下列三個之一:

default

使用者還未被詢問是否授權,所以通知不會被顯示。

granted 表示之前已經詢問過使用者,並且使用者已經授予了顯示通知的許可權。

denied 使用者已經明確的拒絕了顯示通知的許可權。

訊息通知  notification

var n = new notification('部落格更新提示',)
資料參考

前端HTML5桌面通知

notification api 是 html5 新增的桌面通知 api,用於向使用者顯示通知資訊。該通知是脫離瀏覽器的,即使使用者沒有停留在當前標籤頁,甚至最小化了瀏覽器,該通知資訊也一樣會置頂顯示出來。通過這種方式,就可以利用瀏覽器來為使用者推送訊息啦。facebook的web版本,就已經應用了...

HTML5 桌面通知 Notification

notification api 是html5新增的桌面通知api,用來顯示桌面通知訊息。通過window.notification來判斷瀏覽器是否相容notification api if window.notification 要想向使用者顯示通知訊息,就要通過瀏覽器獲取使用者許可權,主要通過n...

HTML5開發 桌面提醒功能

桌面通知功能能夠讓瀏覽器即使是最小化狀態也能將訊息通知給使用者。這和webim是最為天然的結合。不過,目前支援desktop notification功能的瀏覽器只有chrome5 在實際使用的過程中,應該儘量減少通知功能對使用者的干擾,最大程度的減少通知功能的出現,這就需要解決以下幾個問題 win...