通知API指南

Notifications API負責顯示用戶系統通知。這是瀏覽器提供給開發人員的界面，即使未在瀏覽器中打開網站，也允許向用戶顯示消息。

通知API簡介

這通知API是瀏覽器提供給開發人員的界面，向用戶顯示消息，即使沒有在瀏覽器中打開網站/網絡應用程序，也必須獲得他們的許可。

這些消息是一致且本機的，這意味著接收人習慣於它們的UI和UX，它們是系統範圍的，而不是特定於您的站點的。

結合推送API這項技術可能是增加用戶參與度並增強應用程序功能的成功方法。

Notifications API與服務人員，因為它們是推送通知所必需的。你能夠在不使用Push的情況下使用Notifications API，但其用例有限。

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
    // status is "granted", if accepted by user
		var n = new Notification('Title', {
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		})
	})
}

n.close()

權限

要向用戶顯示通知，您必須具有這樣做的權限。

這Notification.requestPermission()方法調用請求此權限。

你可以打電話

Notification.requestPermission()

以這種非常簡單的形式，它將顯示一個權限授予面板-除非之前已經授予了權限。

要在用戶交互（允許或拒絕）時執行某些操作，可以向其附加處理功能：

const process = (permission) => {
  if (permission === "granted") {
    // ok we can show the permission
  }
}
Notification.requestPermission((permission) => {
process(permission)
}).then((permission) => {
process(permission)
})

看看我們如何傳遞回調，我們也期待承諾。這是因為不同的實現Notification.requestPermission()過去的版本，現在我們必須支持，因為我們不知道瀏覽器中正在運行哪個版本。因此，為了將內容保存在一個位置，我在其中提取了權限處理process()功能。

在這兩種情況下，都會傳遞一個函數permission可以具有以下值之一的字符串：

granted：用戶接受了，我們能夠顯示權限
denied：用戶拒絕了，我們不能顯示任何許可

這些值也可以通過檢查Notification.permission屬性，如果用戶已被授予權限，則該屬性將計算為granted或者denied，但如果您尚未致電Notification.requestPermission()但是，它將解決default。

建立通知

這Notification被暴露的物體window瀏覽器中的對象允許您創建通知並自定義其外觀。

這是最簡單的示例，可以在您請求權限後使用：

Notification.requestPermission()
new Notification('Hey')

Create a notification

您可以通過一些選項來自定義通知。

添加身體

首先，您可以添加一個正文，通常以單行顯示：

new Notification('Hey', {
  body: 'You should see this!'
})

Add a body to the notification

新增圖片

您可以添加一個圖標屬性：

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

Add an image to the notification

可以在以下位置找到更多具有平台特定屬性的自定義選項：https://developer.mozilla.org/docs/Web/API/Notification

關閉通知

您可能想要在打開通知後關閉它。

為此，請創建對您打開的通知的引用：

const n = new Notification('Hey')

然後您可以使用以下命令將其關閉：

n.close()

或超時：

setTimeout(n.close(), 1 * 1000)

免費下載我的JavaScript初學者手冊