使用 Notifications 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);

如果 Web 应用没有显示通知的权限，则 requestPermission 方法将显示信息栏：

Google Chrome 中的通知权限信息栏
Google Chrome 中的通知权限信息栏。

不过，请务必注意，requestPermission 方法仅适用于由用户操作（例如鼠标或键盘事件）触发的事件处理脚本，以避免显示不必要的 Infobar。在本例中，用户操作是点击 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 类来封装所有这些事件和操作，以使代码更清晰，但这超出了本教程的范围。