使用 Notification 可以在系統級別發送頁面外部顯示的桌面通知，即使瀏覽器在后臺運行也可以向用戶發出訊息
檢查權限
發送通知需要用戶授權，通過只讀屬性 Notification.permission 獲取是否有權限，其屬性值有
- granted：用戶已明確授權顯示通知的權限
- denied：用戶已明確拒絕顯示通知的權限
- default：用戶還未被詢問是否授權
申請權限
Notification.requestPermission((res) => {
console.log(res) // granted、denied、default
})
創建通知
通過 new Notification("title", options) 創建一條通知，使用 options 對通知做一些自定義設定，包含
- body: 通知的正文，顯示在標題下方
- tag：定義通知的標識，相同 tag 的通知正在顯示的內容會被替換，已經自動關閉的會被替換不再彈出
- icon：通知圖示的 URL
- image：通知中影像的 URL
- renotify：重復的 tag 是否再次通知，默認 false 不重復通知
- requireInteraction：是否強制手動關閉，默認 false 會自動關閉
- silent：是否靜音，默認 false 會有提示聲音
當通知創建后會被立即顯示出來，過一段時間會自動關閉，包含 4 個事件
- onshow：當通知顯示給用戶時觸發
- onclick：當用戶點擊通知后觸發（點擊后通知會被關閉）
- onclose：當使用
notice.close.bind(notice)關閉通知后觸發（自動關閉的通知無法觸發） - onerror：當通知無法顯示給用戶時觸發（常見于沒有用戶沒有授權）
Notification.requestPermission((res) => {
if(res !== 'granted') return
let notice = new Notification("title", {
body: 'body',
tag: '111',
icon: './a.png',
image: './a.png',
renotify: false,
requireInteraction: true,
silent: false,
})
notice.onshow = function () {
console.log('show')
setTimeout(notice.close.bind(notice), 5000)
}
notice.onclick = function () {
console.log('click')
}
notice.onclose = function () {
console.log('close')
}
notice.onerror = function () {
console.log('error')
}
})
注意
發出通知前要檢查是否具有用戶授權，否則通知無法發出
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/523211.html
標籤：其他
下一篇：Vue 腳手架編程