通知 API 負責顯示使用者系統通知。這是瀏覽器提供給開發者的介面，允許在沒有在瀏覽器中打開網站的情況下，經由使用者的允許，向使用者顯示訊息。
介紹通知 API
通知 API 是瀏覽器提供給開發者的介面，允許在沒有打開網站或網頁應用程式的情況下，通過使用者的允許，向使用者顯示訊息。
這些訊息是一致且原生的，也就是接收者從外觀和使用者體驗的角度習慣了它們。它們具有系統層級的特性，並不特定於您的網站。
結合 Push API，這項技術可以是提高用戶參與度和增強應用程式功能的有效方法。
通知 API 會與 Service Workers 高度交互，因為他們是推送通知所需的。您可以在沒有推送的情況下使用通知 API，但其使用情境會受到限制。
if (window.Notification && Notification.permission !== "denied") {
Notification.requestPermission((status) => {
// 如果被使用者接受，狀態會是 granted
var n = new Notification('標題', {
body: '我是內容！',
icon: '/path/to/icon.png' // 選用
})
})
}
n.close()
權限
要向使用者顯示通知，您必須具有此權限。
Notification.requestPermission() 方法呼叫請求此權限。
您可以以以下簡單的方式呼叫 Notification.requestPermission()，並且它會顯示一個權限授予面板，除非之前已經授予了此權限。
要在使用者互動（允許或拒絕）時執行操作，您可以附加一個處理函式：
const process = (permission) => {
if (permission === "granted") {
// 我們可以顯示通知
}
}
Notification.requestPermission((permission) => {
process(permission)
}).then((permission) => {
process(permission)
})
看到我們如何傳遞回呼函式，並且我們期望使用 Promise。這是因為過去針對 Notification.requestPermission() 的不同實現方式，我們現在必須支援了許多版本，無法事先得知瀏覽器中正在運行的版本。因此為了將事物保持在單一位置，我將權限處理提取到 process() 函式中。
在兩種情況下，此函式都會傳遞一個 permission 字串，其可以有以下其中一個值：
granted: 使用者接受了，我們可以顯示許可denied: 使用者拒絕了，我們無法顯示任何許可
這些值也可以透過檢查 Notification.permission 屬性來獲取，如果使用者已經授予權限，它會評估為 granted 或 denied。但如果您尚未呼叫 Notification.requestPermission()，則它將解析為 default。
建立通知
瀏覽器中的 window 物件所公開的 Notification 物件允許您建立通知並自定其外觀。
以下是最簡單的範例，該範例在您要求權限之後運作：
Notification.requestPermission()
new Notification('嘿')
您有幾個選項來自定通知。
新增內容
首先，您可以新增文字內容，通常會顯示為單行：
new Notification('嘿', {
body: '您應該看到此內容！'
})
新增圖片
您還可以新增圖標屬性：
new Notification('嘿', {
body: '您應該看到此內容！',
icon: '/user/themes/writesoftware/favicon.ico'
})
更多自定選項（包含特定平台屬性）的詳細資訊，請參閱 https://developer.mozilla.org/docs/Web/API/Notification
關閉通知
您可能會想在打開通知之後關閉它。
為此，請建立對已打開的通知的參考：
const n = new Notification('嘿')
然後您可以稍後關閉它：
n.close()
或者使用定時轉場：
setTimeout(n.close(), 1 \* 1000)