HTML5的Notification使用

本文不涉及webkitNotification,仅包括HTML5标准的Notification。

Notification使用步骤

  1. 检查浏览器是否支持HTML5的Notification
  2. 检查浏览器的通知权限(是否允许通知)
  3. 若权限不够则获取浏览器的通知权限
  4. 创建并显示消息通知

检查浏览器是否支持Notification

检查Notification或者window.Notification对象,如果存在,说明浏览器支持Notification,目前最新的Chrome/Firefox/Opera都支持Notification,但是IE11和Edge不支持。

if (window.Notification) {
    //浏览器支持 Notification,进行下一步
} else {
    //浏览器不支持 Notification 特性
}

检查浏览器的通知权限

可使用Notification.permission获取浏览器对当前网站的通知的权限,默认情况下权限为”default”,和”denied”类似,没有通知的权限,当权限为”granted”时,浏览器才会允许通知。

if (Notification.permission === 'granted') {
    //允许通知,常见通知并展示。
} else {
    //不允许通知,请求用户许可
}

获取浏览器的通知权限

使用 Notification.requestPermission() 即可让用户选择是否允许通知,调用此方法之后,浏览器会询问用户是否允许显示通知。

Notification.requestPermission()

创建并显示Notification

创建并显示一条Notification的代码如下所示:

var options = {body:"This is a Notification!"};
var notification = new Notification('Hello Notification',options);

第一个参数是通知的标题,第二个参数是一个Js对象,参数如下所示:

var options = {
    dir: "auto",//文字方向,水平/垂直
    lang: "",   //语言
    body: "This is a Notification!",  //通知的内容
    tag: "notificationId",                  //通知示例的ID,同一个ID的通知会更新内容,而不是新建一个通知。
    icon: "http://sixlab.cn/favicon.ico"  //通知的图标
};

Notification的事件

通知默认会一直显示,而且点击是没有任何反应的。但是,一般使用通知的时候,会让通知在一段时间后关闭,点击的时候会打开一个链接并关闭通知。 3s后关闭通知:

var msg = new Notification('Hello Notification',{body:"This is a Notification!"});
msg.onshow = function () {
    setTimeout(function () {
        msg.close();
    }, 3000);
};

点击后打开链接:

var msg = new Notification('Hello Notification',{body:"This is a Notification!"});
msg.onclick = function () {
    window.open("http://www.baidu.com/");
};

全部代码

function showSixNotification(){
    if (window.Notification) {
        if (Notification.permission === 'granted') {
            var options = {
                dir: "auto",
                lang: "",
                body: "This is a Notification!",
                tag: "notificationId",
                icon: "http://sixlab.cn/favicon.ico"
            };
            var msg = new Notification('Hello Notification',options);
            msg.onshow = function () {
                setTimeout(function () {
                    msg.close();
                }, 3000);
            };
            msg.onclick = function () {
                window.open("http://sixlab.cn/");
            };
        } else {
            Notification.requestPermission();
        }
    } else {
        alert('你的浏览器不支持此特性,请下载谷歌浏览器试用该功能');
    }
}

上一篇
【读书】读书笔记计划 【读书】读书笔记计划
15年双11期间,趁着活动买了好多书,但是直到现在也只读了两三本小书,坚持读书并不是一件容易的事情。以后在博客上记录我的读书笔记,一来不浪费几百块钱买的阿里云服务器,二来让自己把读书这件事情坚持下去,三来记录下读书学到的东西和心得体会。一举
2016-11-14
下一篇
JavaFX 对话框及弹出框 JavaFX 对话框及弹出框
之前JavaFx的对话框和弹出框都是使用ControlsFX,前段时间看到了一篇文章(JavaFX Dialogs (official)),介绍了JavaFX 8u40里新添加了对话框和弹出框。试了JavaFx官方的Dialogs和Aler
2016-03-06