【翻译】学习怎样使用Notification API

*原文：http://www.html5rocks.com/en/tutorials/notifications/quick/

介绍

Notification API 允许开发者向用户界面以通知的形式提供事件，包括被动的事件（例如:新的E-mail,微博(tweets)或者日历事务提醒）并且在用户交互方面忽略标签页的聚焦状态(*1)。

你可以按照下面的步骤在几分钟内实现通知功能：

第一步：检查浏览器是否支持Notification API

我们通过JS来检查浏览器是否支持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.");
}

第二步：创建Notifications对象

根据它们的内容我们可以创建两种通知对象：普通文本和HTML。如果你的应用程序两种通知类型都会用到，那么最好创建一个函数然后根据传入的选择参数来决定创建的对象属于哪种类型。

function createNotificationInstance(options) {
  if (options.notificationType == 'simple') {
    return window.webkitNotifications.createNotification(
        'icon.png', 'Notification Title', 'Notification content...');
  } else if (options.notificationType == 'html') {
    return window.webkitNotifications.createHTMLNotification('http://someurl.com');
  }
}

第三步：让用户授权网站显示通知

         如果用户没有手动的为一个网站赋予显示通知的权限，那么我们提到的所有构造通知的方法都会抛出一个安全性的错误。

          要解决这个问题你可以用 try-catcha结构或者你也可以用一个checkPermission()方法达到同样的目的。

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    createNotificationInstance({ notificationType: 'html' });
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

如果这个web应用程序并没有权限来显示通知，那么requestPermission方法将在浏览器中显示一个信息栏。

然而，要记住的非常重要的一点是requestPermission方法只能在用户动作的事件中触发才能正常工作，例如鼠标或者键盘时间，目的是为了避免未经请求的信息栏出现。在这个小例子中，用户的触发动作就是点击id为“show_button”的按钮。

上面截图显示的效果，如果用户并没有明确的点击一个按钮或者链接的话将永远不会触发requestPermission方法。

第四步：绑定监听器和其他动作

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = createNotificationInstance({notificationType: 'html'});
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

尽管已经超出了这个指南的范畴，但是你也许想把所有的事件和动作都封装在你自己的通知类中以保持代码的整洁。

例子

grant_permission

Note:如果你想重置权限的话可以点击这个按钮。

例子1：用户动作触发显示通知

show_html5_notification

-----------------------------------------------------

因为天朝的原因，tweets的那个无法测试。如果大家可以上的话，自己测试一下吧.

第一段(*1)解释：那句话我感觉翻译的不太明白，其实意思就是无论你现在浏览的页面是否是发出通知的那个页面，通知都能显示出来。比如有个通知a是有A.html这个页面发出的，但是现在你在浏览B.html。通知仍然会显示在你的桌面上。

-----------------------------------------------------

最后，这是我第一次翻译英文的教程，可能不是太好，请大家多指正。

随着WEB的发展，web前端变得越来越重要，html5作为其中很重要的部分，就我个人而言还是很感兴趣的，而且自己也想往WEB前端方向发展。以后如果有其他文章我会继续翻译的，希望大家支持。