首页 » HTML5 » HTML5中的Web Notification桌面通知API使用

HTML5中的Web Notification桌面通知API使用

原文 http://blog.csdn.net/xia1229605219/article/details/79006415

2018-01-09 02:00:15阅读(491)

HTML5中的Web Notification桌面通知: 1.传统的通知实现 1.1 在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.title的值。
        var pageTitle = '聊天页面';
        var flag = '【你有新消息】';
        setInterval(function() {
            var title = document.title;
            if (isShine == true) {
                if (title == flag) {
                    document.title = '【         】';
                } else {
                    document.title = flag;
                }
            } else {
                document.title = pageTitle;
            }
        }, 500);
知识点:
Chrome和FireFox浏览器获得焦点和失去焦点方法:
window.onfocus = function() { };
window.onblur = function() { };
// for IE
document.onfocusin = function() { };
document.onfocusout = function() { };   document.onfocusout = function() { };
1.2 缺陷:用户的浏览器要一直是张开的。用户浏览器最小化,标题就看不见,无法及时get到有新消息的信息 2. HTML5 Web Notification桌面通知特点: 2.1 HTML5 Web Notification通知是属于桌面性质的通知,有点类似于显示器右下角蹦出的QQ弹框,杀毒提示之类的,跟浏览器是脱离的,消息是置顶的。 2.2 兼容性:IE14+(Edge),FireFox46+,Chrome29+,safari9.1+opera38+;

HTML5中的Web Notification桌面通知<a href=API使用" src="http://image.zhangxinxu.com/image/blog/201607/2016-07-05_221531.png" alt="" title="">

3. HTML5 Web Notification语法(window.Notification) 3.1 Notification.requestPermission(),这是一个静态方法,作用就是让浏览器出现是否允许通知的提示,

下面这个是最近规范上更新的基于promise的语法:

Notification.requestPermission().then(function(permission) { ... });
Notification.requestPermission().then(function(result) {
    // result可能是是granted, denied, 或default.
});

下面这个是基于简单的回调:

Notification.requestPermission(callback);

无论是then中的还是直接callback函数的参数都是一样的,表示当前是否允许。只会是granted, denied, 或default.其中granted表示用户允许通知,denied表示用户嫌弃你,default表示用户目前还没有操作。

3.2 Notification.permission[只读]

这是一个静态属性。表示是否允许通知,值就是上面的granted, denied, 或default。默认情况下,Notification.permission的值是’default’。
因此,Notification.requestPermission()的回调方法中,可以不使用result参数,直接使用Notification.permission获取当前的通知状态。

3.3 new Notification(title, options)

获取用户授权之后,就可以推送通知了。
var notification = new Notification(title, options);
通过new构造,显示推送通知。其中title是必须参数,表示通知小框框的标题内容,options是可选参数,对象,支持的参数以及释义见下表:

属性名 释义 dir 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左) lang 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。 body 提示主体内容,字符串,会在标题的下面显示。 tag 代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。 icon 字符串,要在通知中显示的图标的URL。 3.4 Notification实例属性值

Notification实例属性值的基本上和上面的options参数一致,返回的值也是options和默认值的合并值(如果浏览器支持的话)。

属性 释义 Notification.title[只读] 通知框的标题内容 Notification.dir[只读] 默认值是auto Notification.lang[只读] 提示的语言 Notification.body[只读] 提示主体内容 Notification.tag[只读] 字符串。标记当前通知的标签。 Notification.icon[只读] 字符串。通知面板左侧那个图标地址 3.5 Notification实例方法 方法 释义 Notification.close() 用于关闭通知。通知如果你放着不管,一段时间后就会自动隐藏,大概30s左右。 3.6 事件处理 事件 释义 Notification.onclick 点击通知事件 Notification.onerror 通知显示异常事件 Notification.onclose 通知关闭事件,无论是用户手动关闭,还是直接Notification.close()关闭都会触发该该事件。 Notification.onshow 通知显示事件

4.实例
HTML代码:

<button id="button">发送消息</button>
<p id="text"></p>

JS代码:

if (window.Notification) {
    var button = document.getElementById('button'), text = document.getElementById('text');
    var popNotice = function() {
        if (Notification.permission == "granted") {
            var notification = new Notification("Hi,你好:", {
                body: '好友添加请求',
                icon: '/logo.jpg'
            });
            notification.onclick = function() {
                text.innerHTML = '张三于' + new Date().toTimeString().split(' ')[0]+'加你为好友!';
                notification.close();
            };
        }
    };
    button.onclick = function() {
        if (Notification.permission == "granted") {
            popNotice();
        } else if (Notification.permission != "denied") {
            Notification.requestPermission(function (permission) {
                popNotice();
            });
        }
    };
} else {
    alert('浏览器不支持Notification');
}

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹