通知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初學者手冊


更多瀏覽器教程: