Notification 浏览器桌面通知

时间 2019-12-16

原文原文链接

1、Notification

Notification是HTML5新增的API，用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。
Notification通知是脱离浏览器的，即便用户没有停留在当前的标签页，甚至最小化了浏览器，也会在主屏幕的右下角显示通知，而后过一段时间后消失。
Notification在操做中也能够监听通知的显示，点击，关闭等事件。

2、例子，你试试

// 判断浏览器是否支持Notification
if (window.Notification) {
    switch (Notification.permission) {
        case 'default':
            alert('用户暂未开启该网站消息通知');
            defaultPermission();
            break;
        case 'granted':
            alert('用户已开启该网站消息通知');
            showNotification();
            break;
        case 'denied':
            alert('用户拒绝该网站消息通知');
            break;
    }
} else {
    alert('暂不支持消息通知');
}

function defaultPermission() {
    Notification.requestPermission().then(permission => {
        switch (permission) {
            case 'default':  
                break;
            case 'granted':
                showNotification();
                break;
            case 'denied':
                alert('用户仍是拒绝了该网站消息通知');
                break;
        }
    });
}

function showNotification() {
    new Notification('我是消息通知！');
}
复制代码

注意：若是第一次在域名控制台中执行上述代码，会提示你是否开启通知。若是开启过，就会自动显示通知。 javascript

注意：若是以前在域名中禁止消息通知，能够本身手动在开启，Notification是不能在禁止状态下代码设计开启消息通知的。 java

用户拒绝显示通知：promise

一旦用户禁止网站显示通知，网站就不能再请求用户受权显示通知，须要用户去设置中更改。浏览器

已谷歌为例，在浏览器设置中，开始添加或者开始网站的消息通知。不一样的浏览器通知设置的地方不太同样。 bash

3、Notification检测权限

// 判断浏览器是否支持Notification
if (window.Notification) {
    switch (Notification.permission) {
        case 'default':
            alert('用户暂未开启该网站消息通知');
            break;
        case 'granted':
            alert('用户已开启该网站消息通知');
            break;
        case 'denied':
            alert('用户拒绝该网站消息通知');
            break;
    }
} else {
    alert('暂不支持消息通知');
}
复制代码

为了不网站滥用通知扰民，在向用户显示通知以前，须要通过用户赞成。函数

Notification.permission 用于代表当前通知显示的受权状态,它有三个值：网站

default: 默认值，用户还未选择
granted: 用户容许该网站发送通知
denied: 用户拒绝该网站发送通知

4、Notification请求权限

Notification.requestPermission().then(permission => {
    switch (permission) {
        case 'default':
            alert('用户关闭了受权');
            break;
        case 'granted':
            alert('用户赞成受权')
            break;
        case 'denied':
            alert('用户仍是拒绝了该网站消息通知');
            break;
    }
});
复制代码

当Notification.permission为default的时候，咱们须要使用Notification.requestPermission()来请求用户权限。 Notification.requestPermission()基于promise语法，then的回调函数参数是用户权限的状态Notification.permission的值。

5、Notification推送通知

当Notification.permission为granted时，请求到用户权限以后，没必要当即发送通知，能够在任意时刻，以任意形式来发送通知。ui

onst title = '这是自定义消息通知';
const options = {
    body: 'body：字符串。通知的body内容。',
    dir: 'auto',
    icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
复制代码

Notification的参数：this

1. title：消息通知标题spa

2. options：

body 只读在构造函数的options参数中指定的通知的正文字符串。
data 只读返回通知数据的结构化克隆。
dir 只读通知的文本方向，在构造函数的options参数中指定。
lang 只读在构造函数的options参数中指定的通知的语言代码。
tag 只读在构造函数的options参数中指定的通知的ID（若是有）。
icon 只读在构造函数的options参数中指定的用做通知图标的图像的URL 。
image 只读要在通知中显示的图像的URL，在构造函数的options参数中指定。
renotify 只读指定在新通知替换旧通知后是否应通知用户。
requireInteraction 只读甲Boolean指示通知应该保持有效，直到用户点击或将其关闭，而不是自动关闭。
silent 只读指定通知是否应该保持静音-即，不管设备设置如何，都不会发出声音或振动。
timestamp 只读指定建立或适用通知的时间（过去，如今或未来）。
title 只读在构造函数的第一个参数中指定的通知的标题。
vibrate 只读为带有振动硬件的设备指定振动模式。

6、Notification事件处理

click：用户点击通知时被触发
show：通知显示的时候触发
error：通知遇到错误的时候触发
close：通知被关闭的时候触发

const title = '这是自定义消息通知';
const options = {
    body: 'body：字符串。通知的body内容。',
    dir: 'auto',
    icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
notification.onclick = e => {
    alert(1);
}
notification.onclose = e => {
    alert(2);
}
notification.onshow = e => {
    alert(3);
}
notification.onerror = e => {
    alert(4);
}
复制代码

7、Notification使用场景

即时通信的软件中可使用，如邮件通知。聊天的通知。
结果通知，如福利彩票结果通知。
新闻通知，如新闻网站的新闻通知。
网站更新，如在系统进行了迭代更新，能够进行通知。

8、示例完整代码

<template>
    <div>
        <button @click="grantedPermission">弹出消息</button>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
        }
    },
    created() {
        // 判断浏览器是否支持Notification
        if (window.Notification) {
            switch (Notification.permission) {
                case 'default':
                    this.defaultPermission();
                    break;
                case 'granted':
                    this.grantedPermission();
                    break;
                case 'denied':
                    alert('用户拒绝该网站消息通知');
                    break;
            }
        } else {
            alert('暂不支持消息通知');
        }
    },
    methods: {
        /**
         * [defaultPermission 当用户拒绝消息通知时，能够询问用户是否开启消息通知]
         * @version  [1.0]
         */
        defaultPermission() {
            Notification.requestPermission().then(permission => {
                switch (permission) {
                    case 'default':  
                        break;
                    case 'granted':
                        this.grantedPermission();
                        break;
                    case 'denied':
                        alert('用户仍是拒绝了该网站消息通知');
                        break;
                }
            });
        },
        /**
         * [grantedPermission 运行消息通知状态，能够向发起消息通知]
         */
        grantedPermission() {
            const title = '这是自定义消息通知';
            const options = {
                body: 'body：字符串。通知的body内容。',
                dir: 'auto',
                icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
            };
            const notification = new Notification(title, options);
            notification.onclick = e => {
                alert(1);
            }
            notification.onclose = e => {
                alert(2);
            }
            notification.onshow = e => {
                alert(3);
            }
            notification.onerror = e => {
                alert(4);
            }
        }
    }
}
</script>
复制代码

9、最大问题

目前Notification除了IE浏览器不支持外, 其余浏览器都已支持桌面通知，移动端浏览器基本都未支持。