本文发表于 3388 天前,其中的信息可能已经事过境迁
Ai摘要
加载中...|
此摘要由AI根据文章内容生成,并经过人工审核,仅用于文章内容的解释与总结

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

Notification使用步骤

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

检查浏览器是否支持Notification

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

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

检查浏览器的通知权限

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

JavaScript

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

获取浏览器的通知权限

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

JavaScript
    Notification.requestPermission()

创建并显示Notification

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

JavaScript
    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后关闭通知:

JavaScript

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

点击后打开链接:

JavaScript

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

全部代码

JavaScript
    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('你的浏览器不支持此特性,请下载谷歌浏览器试用该功能');
        }
    }
赞赏博主
评论 隐私政策