/

通知 API 指南

通知 API 指南

通知 API 負責顯示使用者系統通知。這是瀏覽器提供給開發者的介面，允許在沒有在瀏覽器中打開網站的情況下，經由使用者的允許，向使用者顯示訊息。

介紹通知 API

通知 API 是瀏覽器提供給開發者的介面，允許在沒有打開網站或網頁應用程式的情況下，通過使用者的允許，向使用者顯示訊息。

這些訊息是一致且原生的，也就是接收者從外觀和使用者體驗的角度習慣了它們。它們具有系統層級的特性，並不特定於您的網站。

結合 Push API，這項技術可以是提高用戶參與度和增強應用程式功能的有效方法。

通知 API 會與 Service Workers 高度交互，因為他們是推送通知所需的。您可以在沒有推送的情況下使用通知 API，但其使用情境會受到限制。

1
2
3
4
5
6
7
8
9
if (window.Notification && Notification.permission !== "denied") {
 Notification.requestPermission((status) => {
 // 如果被使用者接受，狀態會是 granted
 var n = new Notification('標題', {
 body: '我是內容！',
 icon: '/path/to/icon.png' // 選用
 })
 })
}
1
n.close()

權限

要向使用者顯示通知，您必須具有此權限。

Notification.requestPermission() 方法呼叫請求此權限。

您可以以以下簡單的方式呼叫 Notification.requestPermission()，並且它會顯示一個權限授予面板，除非之前已經授予了此權限。

要在使用者互動（允許或拒絕）時執行操作，您可以附加一個處理函式：

1
2
3
4
5
6
7
8
9
10
11
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 物件允許您建立通知並自定其外觀。

以下是最簡單的範例，該範例在您要求權限之後運作：

1
2
Notification.requestPermission()
new Notification('嘿')

您有幾個選項來自定通知。

新增內容

首先，您可以新增文字內容，通常會顯示為單行：

1
2
3
new Notification('嘿', {
 body: '您應該看到此內容！'
})

新增圖片

您還可以新增圖標屬性：

1
2
3
4
new Notification('嘿', {
 body: '您應該看到此內容！',
 icon: '/user/themes/writesoftware/favicon.ico'
})

更多自定選項（包含特定平台屬性）的詳細資訊，請參閱 https://developer.mozilla.org/docs/Web/API/Notification

關閉通知

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

為此，請建立對已打開的通知的參考：

1
const n = new Notification('嘿')

然後您可以稍後關閉它：

1
n.close()

或者使用定時轉場：

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

tags: [“通知 API”, “瀏覽器”, “推送通知”]