HTML5 桌面通知 Notification

2021-10-01 04:47:23 字數 983 閱讀 2820

notification api 是html5新增的桌面通知api,用來顯示桌面通知訊息。

通過window.notification來判斷瀏覽器是否相容notification api

if

(window.notification)

要想向使用者顯示通知訊息,就要通過瀏覽器獲取使用者許可權,主要通過notification.permission來判斷。

notification.permission包括的值:

let permission = notification.permission;

// 顯示通知的許可權

if(permission ==

"granted"

)else

if(permission ==

"denied"

)else

獲取使用者通知後,就可以進行推送訊息啦!!

var notification =

newnotification

(title, options)

引數如下:

title:顯示的通知標題

options:通知的設定選項(可選)

還有一些其他的引數,因為沒有用到這裡就不一一枚舉啦。

var notification =

newnotification

(item.name,

)

notification介面的 onclick屬性指定乙個事件偵聽器來接收click事件。

notification.

onclick

=function()

;

最後關於相容問題:目前測試了pc端的,發現window 7 的ie瀏覽器還不支援,其他各瀏覽器通知訊息如果為預設的話也會有不一樣的差異。

前端HTML5桌面通知

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

HTML 5 桌面提醒

notification.requestpermission 該方法將向使用者請求詢問顯示提示框的許可權。返回值有三個 default 預設 granted 允許 denied 拒絕 var notify new notification title,options 建構函式,兩個引數為title ...

html5 桌面提醒 Notifycations

html5中的桌面提醒 web notifications 可以在當前頁面視窗彈出乙個訊息框,這個訊息框是跨 tab 視窗的 本地化的,可以疊加在其他程式介面上,不侷限與瀏覽器視窗內,觸發時及時瀏覽器最小化或者不在螢幕最前面也能顯示訊息窗,這在使用者開啟多個 tab 瀏覽網頁或最小化瀏覽器 或切換至...