如何使用 HTML5 的 Notification API

如何使用 HTML5 的 Notification API

2012-10-29 09:12| 发布者: html5cn |来自: oschina| 评论: 0

摘要: HTML5 已经不是什么新玩意儿，每个人都多少听说过一些HTML5的特性。大多数人认为HTML5无非就是一些像是header, footer, nav, article, section等一样新的语义标签而已，但是很多人不知道它有很多我们可以使用的很棒 ...

HTML5 已经不是什么新玩意儿，每个人都多少听说过一些HTML5的特性。大多数人认为HTML5无非就是一些像是header, footer, nav, article, section等一样新的语义标签而已，但是很多人不知道它有很多我们可以使用的很棒的特性，例如： 地理定位 API HTML5 Details Tag HTML5 表单特性 HTML5 表单验证 HTML5 Placeholder 本文将向你介绍HTML5带来的新特性：Notification API        该特性最有名的运用便是在你收到一封 Gmail 时的提醒，如果你当前打开了一个 Gmail 的页面，你会在屏幕右下角收到一个带标题和简短信息的弹出框。接下来我们将看看怎么才能利用该 API 来创建自己的提示信息。 浏览器支持情况 当前只有 Chrome 19+ Safari 6+支持，点击查看当前 Notification API 支持情况 Notification API 在 Notification API 中会用到两个对象，第一个就是 notification 对象。 01 interface Notification : EventTarget { 02  // display methods 03  void show(); 04  void cancel(); 05  // event handler attributes 06  attribute Function ondisplay; 07  attribute Function onerror; 08  attribute Function onclose; 09  attribute Function onclick; 10 } 这就是notification需要使用到的接口，它有2个方法和相关的4个属性。 Notification 方法 用来显示和隐藏提示框的方法： Show - 该方法用来显示一个提醒 Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。 Notification 属性 通知属性用作事件监听器，监听提醒中的不同事件： ondisplay - 当 notification 被显示时调用 onerror - 当 notification 出现错误时调用 onclose - 当 notification 关闭时调用 onclick - 当提示框被点击时调用 第二个需要的就是 NotificationCenter 接口。 01 interface NotificationCenter { 02  // Notification factory methods. 03  Notification createNotification(in DOMString iconUrl, in DOMString title, inDOMString body) throws(Exception); 04  optional Notification createHTMLNotification(in DOMString url) throws(Exception); 05  // Permission values 06  const unsigned int PERMISSION_ALLOWED = 0; 07  const unsigned int PERMISSION_NOT_ALLOWED = 1; 08  const unsigned int PERMISSION_DENIED = 2; 09  // Permission methods 10  int checkPermission(); 11  void requestPermission(in Function callback); 12 } 13 interface Window { 14 ... 15  attribute NotificationCenter webkitNotifications; 16 ... 17 } Notification center 用来创建 notification 对象，并检查当前页面是否有显示该对象的权限。 使用 Notification center 时需要用到4个方法： createNotification - 如果 notification 有权限被显示，呢么该方法将会创建一个 notification 对象，并为其填充相关的内容。如果页面没有允许 notification ，那么将抛出一个安全异常。 createHTMLNotification - 该方法类似于 createNotification ，若页面有权限显示 notification 它会返回一个相关的对象。该方法使用了一个 URL 参数来加载要显示的 HTML 内容。 checkPermission - 该方法返回该页面使用 notification 的整形权限值。PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, 或者PERMISSION_DENIED = 2 requestPermission - 该方法将向用户请求询问显示提示框的权限。 检查浏览器是否支持 Notification 当你准备用 notification API 做点什么之前，你需要先检查浏览器是否支持，你可以使用一下代码来检查： 1 /** 2  * Check if the browser supports notifications 3  * 4  * @return true if browser does support notifications 5  */ 6  function browser_support_notification() 7  { 8         return window.webkitNotifications; 9  } 获得显示权限 显示一个提醒之前你需要得到用户的允许，获得此权限你需要做的就是使用 requestPermission() 方法： 01 /** 02 * Request notification permissions 03 */ 04 function request_permission() 05 { 06     // 0 means we have permission to display notifications 07     if (window.webkitNotifications.checkPermission() == 0) { 08         window.webkitNotifications.createNotification(); 09         } else { 10         window.webkitNotifications.requestPermission(); 11     } 12 } 显示纯文本提示框         创建一个显示纯文本的提示框前你需要检查是否有权限显示。如果有权限我们就能使用createNotification()方法创建一个新的 notification 了，使用 createNotification() 传递图片、标题以及描述信息3参数即可。 1 /** 2 * Create a plain text notification box 3 */ 4 function plain_text_notification(image, title, content) 5 { 6         if (window.webkitNotifications.checkPermission() == 0) { 7             return window.webkitNotifications.createNotification(image, title, content); 8         } 9 } 显示 HTM L 提醒框        在显示之前我们也需要检查显示权限，如果有权限，我们可以使用createHTMLNotification(url) 方法创建，传递的 url 地址即我们要显示的页面。 1 /** 2  * Create a notification box with html inside 3  */ 4  function html_notification(url) 5  { 6         if (window.webkitNotifications.checkPermission() == 0) { 7             return window.webkitNotifications.createHTMLNotification(url); 8         } 9  } 演示（请使用Chrome 19+ 及 Safari 6+ 浏览） 点击查看演示 （Chrome 22.0.1229.94 m 似乎不支持 createHTMLNotification 方法）

原文链接： http://www.html5cn.org/article-3911-1.html