Ernest Delgado
簡介
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 方法會顯示資訊列：
但請務必注意，為避免出現未經要求的資訊列，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 類別，讓程式碼更簡潔，但這超出本教學課程的範圍。