如何调用chrome的桌面提示框

image

 

HTML5 Web Notification通知是属于桌面性质的通知,有点类似于显示器右下角蹦出的QQ弹框,杀毒提示之类的,跟浏览器是脱离的,消息是置顶的。

如果浏览器支持Web Notification,不考虑私有前缀,则window.Notification就会是一个有很多静态属性和实例方法的函数。基本上,Web Notification所有的语法都是围绕Notification这个函数来进行的。

1. Notification.requestPermission(callback)

这是一个静态方法,作用就是让浏览器出现是否允许通知的【提示】,window系统Chrome浏览器目前的UI效果是这样的:

2. Notification.permission[只读]
这是一个静态属性。表示是否允许通知,值就是下面的granted, denied, 或default.

其中granted表示用户允许通知,denied表示用户嫌弃你,default表示用户目前还没有管你。

3. new Notification(title, options)
通过new构造,显示通知。其中title是必须参数,表示通知小框框的标题内容,options是可选参数,对象,支持的参数以及释义见下表:

属性名
释义

dir 默认值是auto, 可以是ltrrtl,有点类似direction属性。表示提示主体内容的水平书写顺序。

lang 提示的语言。没看出来有什么用。大家可以忽略之~

body 提示主体内容。字符串。会在标题的下面显示。比方说上面的“好啊!(害羞.gif)”。

tag 字符串。标记当前通知的标签。

icon 字符串。通知面板左侧那个图标地址。

data 任意类型和通知相关联的数据。

vibrate 通知显示时候,设备震动硬件需要的振动模式。所谓振动模式,指的是一个描述交替时间的数组,分别表示振动和不振动的毫秒数,一直交替下去。例如[200, 100, 200]表示设备振动200毫秒,然后停止100毫秒,再振动200毫秒。

renotify 布尔值。新通知出现的时候是否替换之前的。如果设为true,则表示替换,表示当前标记的通知只会出现一个。注意都这里“当前标记”没?没错,true参数要想其作用,必须tag需要设置属性值。然后,通知就会像这样覆盖: 而不会是默认的叠高楼:

silent 布尔值。通知出现的时候,是否要有声音。默认false, 表示无声。

sound 字符串。音频地址。表示通知出现要播放的声音资源。

noscreen 布尔值。是否不再屏幕上显示通知信息。默认false, 表示要在屏幕上显示通知内容。

sticky 布尔值。是否通知具有粘性,这样用户不太容易清除通知。默认false, 表示没有粘性。根据我自己的猜测,应该和positionsticky属性值类似。

4. Notification.close()
通知显示了,如何关闭呢?可以通过调用Notification.close()实例方法,实际上,通知如果你放着不管,一段时间后就会自动隐藏,具体多久不详,我估摸着5秒有的。

5. 事件句柄 Notification.onclick
点击通知,然后……

Notification.onerror
通知显示异常,然后。例如,明明Notification.permissiondefault,你还让我显示。

下面这些呢有必要独立出来,虽然现在是支持挺好的,但是,由于目前规范并没有把它们列入其中,所以,未来有可能浏览器就不支持了。
Notification.onclose
通知关闭了,然后…… 无论是用户手动关闭,还是直接Notification.close()关闭都会触发该该事件。

Notification.onshow
通知显示的时候,该干嘛干嘛~~

6. 其他属性值
除了Notification.permission外,Notification还有很多其他只读属性值,但是,基本上和上面的options参数一致,返回的值也是options和默认值的合并值(如果浏览器支持的话)。

Notification.title[只读]

Notification.dir[只读]

Notification.lang[只读]

Notification.body[只读]

Notification.tag[只读]

Notification.icon[只读]

Notification.data[只读]

Notification.silent[只读]

Notification.title[只读]

Notification.timestamp[只读]
通知创建或者可以使用的时间。

Notification.noscreen[只读]

Notification.renotify[只读]

Notification.sound[只读]

Notification.sticky[只读]

Notification.vibrate[只读]

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
测试桌面通知,窗口小化效果更好。
</body>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function(){
        if(! ('Notification' in window) ){
            alert('Sorry bro, your browser is not good enough to display notification');
            return;
        }
        Notification.requestPermission(function(permission){
            var notification = new Notification("桌面提醒",{
                body:'桌面提醒这里是内容',
                icon:'icon.jpg',
                dir:'auto',

            });
            setTimeout(function() {
                notification.close();//关闭桌面通知
            }, 5000);
            notification.onclick = function(){
                //点击桌面通知,模拟实现把用户小化的窗口大化并刷新
                notification.close();//关闭桌面通知
                var href = window.location.href;//获取当前页面的url
                window.close();//将当前页面关闭
                window.open(href);//新开一个页面,url为当前页面
            }
            navigator.onerror = function(){
                //当有错误发生时会onerror函数会被调用
                console.log('桌面通知发生了错误');
            }
            navigator.onshow = function(){
                //消息框显示时会被调用
                console.log('桌面通知显示ing');
            }
        });
    });
</script>
</html>

 

 

PDT版本升级提醒

var version = "<?php echo $version ?>";
var releases = "<?php echo $releases ?>";
//桌面提醒  
function notify(title, content) {  
          
        if(!title && !content){  
            title = "PDT新版本提醒";  
            content = "PDT有新的版本,请您更新!";  
        }  
        var iconUrl = "data:image/png;base64,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";  
          
        if (window.webkitNotifications) {  
            //chrome老版本  
            if (window.webkitNotifications.checkPermission() == 0) {  
                var notif = window.webkitNotifications.createNotification(iconUrl, title, content);  
                notif.display = function() {}  
                notif.onerror = function() {}  
                notif.onclose = function() {}  
                notif.onclick = function() {this.cancel();}  
                notif.replaceId = 'Meteoric';  
                notif.show();  
            } else {  
                window.webkitNotifications.requestPermission($jy.notify);  
            }  
        }  
        else if("Notification" in window){  
            // 判断是否有权限  
            if (Notification.permission === "granted") {  
                var notification = new Notification(title, {  
                    "icon": iconUrl,  
                    "body": content,
                    "tag":"PDTNotice",
                    "renotify":true,
                });  
                
                notification.onclick = function(){
                    notification.close();
                    var href = "http://git.cxiangnet.cn/sunny5156/PDT/releases";
                    window.open(href);
                }
            }  
            //如果没权限,则请求权限  
            else if (Notification.permission !== 'denied') {  
                Notification.requestPermission(function(permission) {  
                    // Whatever the user answers, we make sure we store the  
                    // information  
                    if (!('permission' in Notification)) {  
                        Notification.permission = permission;  
                    }  
                    //如果接受请求  
                    if (permission === "granted") {  
                        var notification = new Notification(title, {  
                            "icon": iconUrl,  
                            "body": content,
                            "tag":"PDTNotice",
                            "renotify":true,
                        });

                        notification.onclick = function(){
                            notification.close();
                            var href = "http://git.cxiangnet.cn/sunny5156/PDT/releases";
                            window.open(href);
                        }

                    }  
                });  
            }  
        }  
    } 

if(parseInt(releases.replace('.')) >= parseInt(version.replace('.')) ){
    notify();
}