如何使用 HTML5 的 Notification API

Question

如题所述

Answer 1

使用 HTML5 的 Notification API的方法：
1、申请权限
出于安全考虑，要发送桌面消息，需要先申请用户授权。Notification对象提供了一个静态的方法——requestPermission()，它接收一个回调函数作为参数，并把返回值传递给回调函数作为参数：
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
});

返回值为字符串，有以下三个值：
default
granted
denied
默认为default，也就是需要询问，表现和denied一样。
2、创建消息
用户授权以后，就可以通过下面方式创建一条桌面提醒了：
var n = new Notification(title, options);

options为字典，传入Notification对象的属性。
3、包含属性
Notification对象有如下几个只读属性：
dir(文字方向，经测试都不支持)
lang(语言)
body(消息体)
tag(标签)
icon(icon地址)
这几个属性都可以在创建消息的时候，作为option传入Notification构造函数。提一下tag属性，在有很多消息的时候，这个属性就非常有用，它会用拥有相同tag的最新的消息取代之前的消息，只显示一条最新的消息。比如在一个聊天室系统中，同时和几个人在聊天的时候，就可以以人名为tag显示不同人的最新消息。
4、定义事件
Notification对象有四个事件，分别是
onshow()
onclick()
onclose()
onerror()
分别在消息显示、被点击、被关闭和出错的时候被触发。通常情况下，只需要处理点击事件就够了，比如点击消息后跳转到某一特定的页面。
这四个事件的使用可以网上搜索

Answer 2

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 对象。

interface Notification : EventTarget {
// display methods void show();
void cancel();
// event handler attributes attribute Function ondisplay;
attribute Function onerror;
attribute Function onclose;
attribute Function onclick;
}

这就是notification需要使用到的接口，它有2个方法和相关的4个属性。

Notification 方法

用来显示和隐藏提示框的方法：

Show - 该方法用来显示一个提醒

Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。

Notification 属性

通知属性用作事件监听器，监听提醒中的不同事件：

ondisplay - 当 notification 被显示时调用

onerror - 当 notification 出现错误时调用

onclose - 当 notification 关闭时调用

onclick - 当提示框被点击时调用

第二个需要的就是 NotificationCenter 接口。

interface NotificationCenter {
// Notification factory methods. Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception);
optional Notification createHTMLNotification(in DOMString url) throws(Exception);
// Permission values const unsigned int PERMISSION_ALLOWED = 0;
const unsigned int PERMISSION_NOT_ALLOWED = 1;
const unsigned int PERMISSION_DENIED = 2;
// Permission methods int checkPermission();
void requestPermission(in Function callback);
} interface Window {
...
attribute NotificationCenter webkitNotifications;
...
}

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 做点什么之前，你需要先检查浏览器是否支持，你可以使用一下代码来检查：

/**
* Check if the browser supports notifications
*
* @return true if browser does support notifications
*/
function browser_support_notification()
{
return window.webkitNotifications;
}

获得显示权限

显示一个提醒之前你需要得到用户的允许，获得此权限你需要做的就是使用 requestPermission() 方法：

/**
* Request notification permissions
*/ function request_permission()
{
// 0 means we have permission to display notifications if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification();
} else {
window.webkitNotifications.requestPermission();
}
}

显示纯文本提示框

创建一个显示纯文本的提示框前你需要检查是否有权限显示。如果有权限我们就能使用createNotification()方法创建一个新的
notification 了，使用 createNotification() 传递图片、标题以及描述信息3参数即可。

/**
* Create a plain text notification box
*/ function plain_text_notification(image, title, content)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createNotification(image, title, content);
}
}

显示 HTM L 提醒框

在显示之前我们也需要检查显示权限，如果有权限，我们可以使用createHTMLNotification(url) 方法创建，传递的 url
地址即我们要显示的页面。

/**
* Create a notification box with html inside
*/
function html_notification(url)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createHTMLNotification(url);
}
}本回答被提问者采纳

Answer 3

概述

Notification 对象使用来为用户设置和显示桌面通知。

构造方法

var notification = new Notification(title, options)

参数

title 一定会被显示的通知标题

options 可选 一个被允许用来设置通知的对象。它包含以下属性：

dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）

lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。

body: 通知中额外显示的字符串

tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。

icon: 一个图片的URL，将被用于显示通知的图标。

属性

静态属性

这些属性仅在 Notification 对象上有效。

Notification.permission 只读

一个用于表明当前通知显示授权状态的字符串。可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), or default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).

实例属性

这些属性仅在 Notification 的实例中有效。

Notification.title 只读 

在构造方法中指定的 title 参数。

Notification.dir 只读

通知的文本显示方向。在构造方法的 options 中指定。

Notification.lang 只读

通知的语言。在构造方法的 options 中指定。

Notification.body 只读

通知的文本内容。在构造方法的 options 中指定。

Notification.tag 只读

通知的 ID。在构造方法的 options 中指定。

Notification.icon 只读

通知的图标图片的 URL 地址。在构造方法的 options 中指定。

事件处理

Notification.onclick

处理 click 事件的处理。每当用户点击通知时被触发。

Notification.onshow

处理 show 事件的处理。当通知显示的时候被触发。

Notification.onerror

处理 error 事件的处理。每当通知遇到错误时被触发。

Notification.onclose

处理 close 事件的处理。当用户关闭通知时被触发。

方法

静态方法

这些方法仅在 Notification 对象中有效。

Notification.requestPermission()

用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

实例方法

这些方法仅在 Notification 实例或其 prototype 中有效。

Notification.close()

用于关闭通知。

Notification 对象继承自 EventTarget 接口。

Answer 4

可以参考下这篇博文http://www.cnblogs.com/lxshanye/p/3560188.html

notificationInstance.show()
//调用该方法将在右下角弹出一个通知窗口
notificationInstance.cancel()
//调用该方法将关闭通知窗口

Answer 5

显示和隐藏提示框的方法：
Show - 该方法用来显示一个提醒；Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。
Notification 属性：ondisplay - 当 notification 被显示时调用；onerror - 当 notification 出现错误时调用；onclose - 当 notification 关闭时调用；onclick - 当提示框被点击时调用。