使用 Web Notifications 通知 API

Question

Notifications API 允许您向用户显示给定事件的通知，包括被动（新电子邮件、推文或日历事件）和用户交互，无论哪个选项卡具有焦点。 有 规范草案 ，但目前不在任何标准中。您可以按照这些简单的步骤在几分钟内实现通知：

第 1 步：检查通知 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 方法将显示信息栏：

The notifications permission infobar in 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 类以保持代码更简洁，尽管这超出了本教程的范围。

请注意，根据屏幕和通知大小，可以显示的通知数量有限。 平均值往往在 5 左右，超过该值的任何新通知都将排队等待当前通知关闭。

// Retrieve tweets using jsonp.
var script = document.createElement("script");
script.src = 'http://twitter.com/statuses/user_timeline/'+ username+'.json?' +
             'count=3&callback=fetchTweets';
document.body.appendChild(script);

function fetchTweets(data) {
  var tweet;
  var i = data.length;
  while (i--) {
    tweet = data[i];
    if (window.webkitNotifications.checkPermission() == 0) {
      window.webkitNotifications.createNotification(
          tweet.user.profile_image_url, tweet.user.name,
          tweet.text).show(); // note the show()
    } else {
      // Note that we can't call requestPermission from here as we are in the
      // callback function and not triggered just on user action
      console.log('You have to click on "Set notification permissions for this page" ' +
                  'first to be able to receive notifications.');
      return;
    }
  }
}

了解通知是在回调函数上创建的这一点非常重要。 如果用户此时没有权限，那么我们将无法显示通过 requestPermission() 方法请求权限的信息栏。 正如我们在第 3 步中解释的那样，此方法只能在用户操作时触发。