notification(浏览器通知)
阅读原文时间:2023年07月08日阅读:3

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

四、取消允许

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

4.2

4.3

4.4

4.5

兼容:

五、个人体会

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

六、参考资料

https://developer.mozilla.org…