Notification桌面提醒：HTML5新功能

最新推荐文章于 2024-06-28 14:42:19 发布

莫纷飞

最新推荐文章于 2024-06-28 14:42:19 发布

阅读量2.1k

点赞数

分类专栏：干货小技巧文章标签： html5 Notificati 桌面弹窗右下角弹窗

本文链接：https://blog.csdn.net/NEWSEKAES/article/details/52614739

版权

干货小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.Notification介绍

window.Notification，是一个通过浏览器调用桌面弹窗的API，具体效果如下

如今支持Notification基础功能的浏览器有Chrome,Firefox,Opera,Safari(IE在角落默默画圈)；
支持Notification的option.icon功能的有Chrome，Firefox;
支持Notification的option.sound功能的到现在为止，没有。重要的事情说3遍：没有！没有！没有！

2. Notification基本用法

首先，不是每个浏览器都支持Notification的(说你呢，IE还有Edge),所以我们首先需要判断浏览器是否支持if(window.Notification)；
其次，由于是调用桌面弹窗性质的高级API，用户默认是无视弹窗API调用的，所以应该询问用户是否开启通知功能if(Notification.permission=="granted");

这里说明一下，Notification.permission有3种状态: default(默认无视) granted(同意通知) denied(拒绝通知)

最后，当一切就绪，我们就可以调用API了，栗子如下：

new Notification("宣言",{body:"消灭人类暴政，世界属于三体！"})

这里的方法Notification(title[,options])有两个参数，第一个为标题，第二个则为可选的配置；options是一个对象，基本的属性及例值如下

 var options = {
                    body:"消灭人类暴政，世界属于三体！",
                    icon:"http://youdaocloud.oss-cn-shanghai.aliyuncs.com/202279.jpg",
                    dir:"auto",//显示方向，另外还有rtl和ltr两个值，自左向右和自右向左
                    tag:"随便起个类名字",//把tag属性去掉，然后连续弹几个弹窗试试，就知道什么作用了
                    sound:'http://localhost:63342/SVG/2.mp3',//提醒第4次，现在没有浏览器支持sound
                    silent:false//为true的话不会有声音和震动
                };

这里不多说了，相信看官也猜的八九不离十了

下面放一段完整地码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio id="soundFX">
    <source src="2.mp3"/>
    123
</audio>
<button id="notifyButton">Message</button>
<button id="requestbutton">request</button>
<script>
    var dir = window.location;
   var notiBtn = document.getElementById("notifyButton");
    var reqBtn = document.getElementById("requestbutton");
    notiBtn.onclick=function () {
        if(window.Notification){
            if(window.Notification.permission=="granted"){
                var options = {
                    body:"消灭人类暴政，世界属于三体！",
                    icon:"http://youdaocloud.oss-cn-shanghai.aliyuncs.com/202279.jpg",
                    dir:"auto",
                    tag:"SoMany",
                    sound:'http://localhost:63342/SVG/2.mp3',
                    silent:false
                };
                var notice = new Notification("宣言",options);
            }
            else {
                Notification.requestPermission();
            }
        }
        else{
            alert("你的浏览器不资磁该功能，真是遗憾啊。")
        }
    }
</script>
</body>
</html>

效果如下

4. 高级用法略写

通过 new Notification(title[,options])生成的自定义变量对象notice可以绑定诸多事件：error, click, show, close；并且可以调用notice.close()方法将弹窗直接关闭而不需要等待延时；
另外，options还有一个actions属性，此属性关乎另外一个新技术ServiceWorker或者说Web Worker的一部分，有兴趣的同学可以一看