使用通知 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 類別，讓程式碼更簡潔，但這超出本教學課程的範圍。