html5：notification(浏览器通知)

矫情吗；* 2024-03-30 10:53 30阅读 0赞

#### 一、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>

![6901741151b707370fb86d53eee209cf.png][]

#### 四、取消允许 ####

chrome：浏览器设置-->内容设置-->通知-->允许-->点击删除某个网站。  
截图：  
4.1

![b1b88a799acc52b39f6269f96e9da8f7.png][]

4.2

![c3c6cc5f196b3f74a71000536178ee2b.jpeg][]

4.3

![f062adfe3dabee9f3e850f0643570309.jpeg][]

4.4

![8518979c64ac4fcfc6fe12c4de606c20.png][]

4.5

![d58f232b6fce739672e64a3d14721216.png][]

兼容：

![31a4fc010711a50671c00285defa0d4e.png][]

#### 五、个人体会 ####

目前只是实现了浏览器端的notification，如果再写个接口，从接口中调取数据，在boss后台做信息管理与是否显示这样就非常棒了。

#### 六、参考资料 ####

[Notification - Web API 接口参考 | MDN][Notification - Web API _ _ MDN]

注：本文转载自本人2018年博客 ，欢迎交流指正[javascript - notification(浏览器通知) - 个人文章 - SegmentFault 思否][javascript - notification_ - _ - SegmentFault]

[6901741151b707370fb86d53eee209cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d76d60ad3b3d42daa4e72e478eeae93f.png
[b1b88a799acc52b39f6269f96e9da8f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fdf7c2c5a47d43499f6a095029b05962.png
[c3c6cc5f196b3f74a71000536178ee2b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d74e358b450249adafab17b661622dfb.jpeg
[f062adfe3dabee9f3e850f0643570309.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/609f9dd9c9794825b41e73c4a19372ca.jpeg
[8518979c64ac4fcfc6fe12c4de606c20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/90719b7482a24a7593b4751fbcc4c673.png
[d58f232b6fce739672e64a3d14721216.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/569a13a108e8440da558274aa8be70ad.png
[31a4fc010711a50671c00285defa0d4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/88938fb566b948d49dd4f9b2141544f9.png
[Notification - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/notification
[javascript - notification_ - _ - SegmentFault]: https://segmentfault.com/a/1190000013283311