JavaScript 使用 Notification 發送系統通知

使用 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')
    }
})

註意

發出通知前要檢查是否具有用戶授權，否則通知無法發出