使用通知 API

Ernest Delgado
Ernest Delgado
X

簡介

Notifications API 可讓您針對特定事件向使用者顯示通知，無論是被動 (新電子郵件、推文或日曆活動) 還是使用者互動，皆可顯示通知，且不受限於哪個分頁具有焦點。草稿規格已完成，但目前尚未納入任何標準。

您可以按照下列簡單步驟，在幾分鐘內實作通知功能：

步驟 1：檢查是否支援 Notifications API

我們會檢查系統是否支援 webkitNotifications。請注意，webkitNotifications 的名稱是因為它是草稿規格書的一部分。最終規格書將改用 notifications() 函式。

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

步驟 2：讓使用者授權給網站，以便顯示通知

如果使用者未手動授予網站顯示通知的權限，任何上述建構函式都會擲回安全性錯誤。如要處理例外狀況，您可以使用 try-catch 陳述式，也可以使用 checkPermission 方法。

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

如果網頁應用程式沒有顯示通知的權限，requestPermission 方法就會顯示資訊列：

Google Chrome 中的通知權限資訊列
Google Chrome 中的通知權限資訊列。

不過，請務必記住，requestPermission 方法只適用於使用者動作 (例如滑鼠或鍵盤事件) 觸發的事件處理常式，以免出現不必要的資訊列。在本例中，使用者動作是點選 ID 為「show_button」的按鈕。如果使用者未明確按下某個按鈕或連結，在某個時間點觸發 requestPermission，上述程式碼片段就無法運作。

步驟 3：附加事件監聽器和其他動作

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

此時，您可能會想要封裝所有這些事件和動作，建立自己的 Notification 類別，以便讓程式碼更整潔，但這超出本教學課程的範圍。