HTML5桌面通知Notifications

HTML5的Notifications桌面通知,无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面,仅仅依附于浏览器。

HTML5桌面通知Notifications

一、一个桌面通知生成的正常流程

检查浏览器是否支持Notification

检查浏览器的通知权限(是否允许通知)

若权限不够则获取浏览器的通知权限

创建消息通知

展示消息通知

注意: 关于第一点的说明需要做一些说明,Notification目前还没有标准化,所以目前只支持chrome19+和safari6+。

二、Notification API

1.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 方法

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

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

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

Notification 属性

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

ondisplay - 当 notification 被显示时调用

onerror - 当 notification 出现错误时调用

onclose - 当 notification 关闭时调用

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

2.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 时需要用到4个方法:

①createNotification - 如果 notification 有权限被显示,呢么该方法将会创建一个 notification 对象,并为其填充相关的内容。如果页面没有允许 notification ,那么将抛出一个安全异常。

②createHTMLNotification - 该方法类似于 createNotification ,若页面有权限显示 notification 它会返回一个相关的对象。该方法使用了一个 URL 参数来加载要显示的 HTML 内容。

③checkPermission - 该方法返回该页面使用 notification 的整形权限值。

PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, 或者 PERMISSION_DENIED = 2

④requestPermission - 该方法将向用户请求询问显示提示框的权限。

三、示例代码

  1. //判断浏览器是否支持Notification
  2. if (window.Notification) {
  3. var title;
  4.     var options;
  5.     title = '你有一条新短消息,请注意查收!';
  6.     options = {
  7.        body: "你好",
  8.        tag: "custom",
  9.        icon: "img/img.jpg"
  10.     };
  11.     Notification.requestPermission(function() {
  12.         var notification = new Notification(title, options);
  13.         notificationEvents.forEach(function(eventName) {
  14.             notification[eventName] = function(event) {
  15.             };
  16.         });
  17.     });
  18.     } else {
  19.         alert("你使用的浏览器不支持弹出提示,请更换Chrome内核浏览器!");
  20.     }

最后说一下,如果大家有什么不懂的地方请在下面留言。

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

    A+
发布日期:2016年01月26日  所属分类:HTML  Web
标签:

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:3   其中:访客  3   博主  0

  1. avatar 丁春华 1

    亲,你的代码外围,加的什么显示的这个样式? :shock:

  2. avatar the better 1

    H5现在好流行啊,学习啦

  3. avatar 米粒博客 5

    高大上的东西 我用不上 不过可以了解一二

评论加载中...