html5：notification(浏览器通知)

news2025/2/1 16:43:17

一、notification简介

Web Notifications是HTML5 的一个特性，目前我知道的有谷歌浏览器和windows edge对它进行了支持，用于向用户配置和显示桌面通知。

二、notification方法

2.1静态方法

这些方法仅在 Notification 对象中有效。
Notification.requestPermission()
用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

2.2实例方法

这些方法仅在 Notification 实例或其 prototype 中有效。
1，Notification.close()
用于关闭通知。
Notification 对象继承自 EventTarget 接口。
2，EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
3，EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
4，EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.

三、notification举例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            body{position: relative;}
            .notification {
                width: 200px;
                height: 50px;
                padding: 20px;
                line-height: 50px;
                text-align: center;
                background: #008800;
                border-radius: 5px;
                font-size: 30px;
                position: absolute;
                left: 45%;
            }
        </style>
    </head>

    <body>
        <div class="notification" @click="notifyMe()">notification</div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: '.notification',
            data: {},
            methods: {
                notifyMe() {
                    // 先检查浏览器是否支持
                    if(!("Notification" in window)) {
                        alert("This browser does not support desktop notification");
                    }

                    // 检查用户是否同意接受通知
                    else if(Notification.permission === "granted") {
                        // If it's okay let's create a notification
                        var notification = new Notification("你好snowball:", {  
                            dir: "auto",  //auto（自动）, ltr（从左到右）, or rtl（从右到左）
                            lang: "zh",  //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
                            tag: "testTag",  //赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
                            icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG",  //提示时候的图标
                            body: "今天是个好天气"  // 一个图片的URL，将被用于显示通知的图标。
                        }); 
                    }

                    // 否则我们需要向用户获取权限
                    else if(Notification.permission !== 'denied') {
                        Notification.requestPermission(function(permission) {
                            // 如果用户同意，就可以向他们发送通知
                            if(permission === "granted") {
                                var notification = new Notification("你好snowball:", {  
                                    dir: "auto",  //auto（自动）, ltr（从左到右）, or rtl（从右到左）
                                    lang: "zh",  //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
                                    tag: "testTag",  //赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
                                    icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG",  //提示时候的图标
                                    body: "今天是个好天气"  // 一个图片的URL，将被用于显示通知的图标。
                                }); 
                            }
                        });
                    }

                    // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
                    // 出于尊重，我们不应该再打扰他们了
                }
            }
        })
    </script>

</html>