Notification 浏览器桌面通知-阿里云开发者社区

Notification 浏览器桌面通知

2022-05-09 303

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、Notification

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

二、例子，你试试

// 判断浏览器是否支持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('我是消息通知！');
}

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

注意：如果之前在域名中禁止消息通知，可以自己手动在开启，Notification是不能在禁止状态下代码设计开启消息通知的。

用户拒绝显示通知：

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

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

三、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: 用户拒绝该网站发送通知

四、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的值。

五、Notification推送通知

当Notification.permission为granted时，请求到用户权限之后，不必立即发送通知，可以在任意时刻，以任意形式来发送通知。

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的参数：

1. title：消息通知标题

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 只读为带有振动硬件的设备指定振动模式。

六、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);
}

七、Notification使用场景

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

八、示例完整代码

<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>