如何调用chrome的桌面提示框

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`, 可以是`ltr`或`rtl`，有点类似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`, 表示没有粘性。根据我自己的猜测，应该和`position`的`sticky`属性值类似。

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

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

Notification.onerror
通知显示异常，然后。例如，明明Notification.permission是default，你还让我显示。

下面这些呢有必要独立出来，虽然现在是支持挺好的，但是，由于目前规范并没有把它们列入其中，所以，未来有可能浏览器就不支持了。
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("Here I am!",{
                body:'Thanks for clicking that button. Hope you liked.',
                icon:'http://img06.tooopen.com/images/20160712/tooopen_sy_170083325566.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>

如何调用chrome的桌面提示框

猜你喜欢