如何使用 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()
分别在消息显示、被点击、被关闭和出错的时候被触发。下面的例子中完整的展示了这四个事件的使用。通常情况下，只需要处理点击事件就够了，比如点击消息后跳转到某一特定的页面。
举例说明：
window.addEventListener("load", function(){
if(Notification && Notification.permission !== "granted"){
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}
});
}
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function(){
var t = new Date().toLocaleString();
var options={
dir: "ltr",
lang: "utf-8",
icon: "http://ihuster.com/static/avatar/m_default.png",
body: "你好呀，欢迎留言交流呀"
};
if(Notification && Notification.permission === "granted"){
var n = new Notification("HUSTecho: "+ t, options);
n.onshow = function(){
console.log("You got me!");
};
n.onclick = function() {
alert("You clicked me!");
window.location = "/";
};
n.onclose = function(){
console.log("notification closed!");
};
n.onerror = function() {
console.log("An error accured");
}
}else if(Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status){
if(Notification.permission !== status){
Notification.permission = status;
}

if(status === "granted"){
for(var i = 0; i < 3; i++){
var n = new Notification("Hi! " + i, {
tag: "Beyoung",
icon: "http://ihuster.com/static/avatar/b_default.png",
body: "你好呀，我是第" + i +"条消息啦！"
});
}
}
});
}else{
alert("Hi!");
}
});
});

Answer 2

　　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;
　　}
　　1.用来显示和隐藏提示框的方法：
　　Show - 该方法用来显示一个提醒
　　Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。
　　Notification 属性
　　2.通知属性用作事件监听器，监听提醒中的不同事件：
　　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个方法：
　　1.createNotification - 如果 notification 有权限被显示，呢么该方法将会创建一个 notification 对象，并为其填充相关的内容。如果页面没有允许 notification ，那么将抛出一个安全异常。
　　2.createHTMLNotification - 该方法类似于 createNotification ，若页面有权限显示 notification 它会返回一个相关的对象。该方法使用了一个 URL 参数来加载要显示的 HTML 内容。
　　3.checkPermission - 该方法返回该页面使用 notification 的整形权限值。PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, 或者 PERMISSION_DENIED = 2
　　4.requestPermission - 该方法将向用户请求询问显示提示框的权限。
　　检查浏览器是否支持 Notification
　　当你准备用 notification API 做点什么之前，你需要先检查浏览器是否支持，你可以使用一下代码来检查：
　　？
　　/**
　　* Check if the browser supports notifications
　　*
　　* @return true if browser does support notifications
　　*/
　　function browser_support_notification()
　　{
　　return window.webkitNotifications;
　　}
　　获得显示权限
　　/**
　　* 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

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 4

TML5 已经不是什么新玩意儿，每个人都多少听说过一些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, inDOMString 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() 方法：
　　

1
2
3
4
5
6
7
8
9
10
11
12

/**
* 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 5

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);
}
}