欧内斯特·德尔加多
简介
借助 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);
如果 Web 应用无权显示通知，则 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 类，以使代码更加简洁，但这超出了本教程的讨论范围。