精华内容
下载资源
问答
  • 浏览器通知
    2020-04-27 10:58:09

    最近在写一个web端聊天系统,需求是要在浏览器最小化或者不在当前窗口的时候接收新消息会有浏览器通知,网上找了一下,找到了Notification API这个东西。
    稍微研究了一下,这个东西的兼容性不是很高,一般是谷歌,火狐等可以使用。

    话不多说,上代码

    if(window.Notification) { //判断浏览器是否支持Notification 
    			Notification.requestPermission().then(permission => { //向浏览器请求允许通知
    				if(permission == 'granted') {
    				//发起一条新通知
    					var myNotification = new Notification('新消息通知', {
    							body: '您收到了一条新消息(点击查看)',
    							icon: 'static/img/icon_logo.png'
    						});
    						myNotification .onclick = function() {
    							window.focus(); //点击消息通知后回到相应窗口
    							myNotification.close(); //关闭清除通知
    						}
    				}
    			});
    		}
    
    更多相关内容
  • 也不是浏览器通知 简单的浏览器通知 去做 基于 Favicon 的实现 商业支持 您可以从购买商业支持。
  • 当我们使用了websocket技术实现了实时的推送访客...首先要明确一点,现在的通知只能在https的环境下使用 , 非https , 不能使用浏览器通知,Notification.permission返回的是禁止 notify(title, options, callback) {
  • js实现浏览器通知、浏览器推送

    千次阅读 2019-10-11 10:14:39
    js实现浏览器通知 ##这种一直在轮询等到有通知的时候获取权限是否显示通知 在这里插入代码片 (function(window) { 'use strict'; function Notify() {}; window.Notify = Notify; //设置参数; var options = {...

    js实现浏览器通知

    ##这种一直在轮询等到有通知的时候获取权限是否显示通知

    在这里插入代码片
    (function(window) {
        'use strict';
        function Notify() {};
    
        window.Notify = Notify;
        //设置参数;
        var options = {
            noticeList: [], //通知存储数组
            notification: null, //通知对象
            title: '',
            body: '',
            data: {
                url: 'https://www.aigupiao.com/'
            },
            icon: 'img/logo.png',
            content: "通知...",
            time: 1000
        };
    
    
        Notify.showNotice = function(title, body, icon, data) {
            if (!("Notification" in window)) {
                alert("抱歉,您的浏览器不支持桌面通知");
            } else if (Notification.permission === "granted") {
                options.notification = new Notification(title ? title : options.title, {
                    body: body ? body : options.body,
                    icon: icon ? icon : options.icon,
                    // requireInteraction: true,
                    data: data
                });
                options.noticeList.push(options.notification);
    
            } else if (Notification.permission !== "denied") {
                Notification.requestPermission(function(permission) {
                    if (permission === "granted") {
                        options.notification = new Notification(title ? title : options.title, {
                            body: body ? body : options.body,
                            icon: icon ? icon : options.icon,
                            // requireInteraction: true,
                            data: data
                        });
                        options.noticeList.push(options.notification);
                    }
                });
            }
        };
    
    
        //单击通知
        Notify.clickNotice = function() {
            if (options.notification != null) {
                options.notification.onclick = function() {
                    window.open(options.notification.data.url, '_blank');
                };
            }
    
        };
    
        //清除通知
        Notify.clearNotice = function() {
            // options.notification.close();
            options.noticeList[options.noticeList.length - 1].close();
            options.noticeList.pop();
        };
    
        //清除所有通知
        Notify.clearAllNotice = function() {
            for (var i = 0; i < options.noticeList.length; i++) {
                options.noticeList[i].close();
            }
        };
    
        //自动关闭
        Notify.autoClose = function(time) {
            if (options.notification != null) {
                time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
            }
        };
    
    
        Notification.requestPermission(function(permission) {
            console.log(permission);
        });
    
        var inter = setInterval(function() {
            $.ajax({
                url: "你要轮询的url",
                dataType: "json",
                success: function(res) {
                    if(res.rslt === 'succ'){
                        var data = res.data
                        for (var i = data.length - 1; i >= 0; i--) {
                            (function(item){
                                Notify.showNotice(item.title, item.content, item.icon, item);
                                Notify.clickNotice()
                                Notify.autoClose(20000);
                            })(data[i])
                        }
                    }
    
                    // Notify.clearNotice();
                    // Notify.clearAllNotice();
    
                }
            });
        }, 6000);
    })(window);
    
    

    或者

    这种适合没有权限就不让轮询的情况(防止无用的轮询)。

    ;
    (function(window) {
        'use strict';
    
        var open_notify =  localStorage.getItem('notify_switch');
        console.log(open_notify)
        if(open_notify === 'true' || open_notify === null) {
            $('#notify_switch').removeClass('is_off').addClass('is_open');
        }
        if(open_notify === null) {
            localStorage.setItem('notify_switch','true');
        }
    
    
        function Notify() {};
    
        window.Notify = Notify;
        var inter = null;
        //设置参数;
        var options = {
            noticeList: [], //通知存储数组
            notification: null, //通知对象
            title: '',
            body: '',
            data: {
                url: 'https://www.aigupiao.com/'
            },
            icon: 'img/logo.png',
            content: "通知...",
            time: 1000
        };
    
    
        Notify.showNotice = function(title, body, icon, data) {
            if (!("Notification" in window)) {
                alert("抱歉,您的浏览器不支持桌面通知");
            } else if (Notification.permission === "granted") {
                options.notification = new Notification(title ? title : options.title, {
                    body: body ? body : options.body,
                    icon: icon ? icon : options.icon,
                    // requireInteraction: true,
                    data: data
                });
                options.noticeList.push(options.notification);
    
            } else if (Notification.permission !== "denied") {
    
                Notification.requestPermission(function(permission) {
                    if (permission === "granted") {
                        options.notification = new Notification(title ? title : options.title, {
                            body: body ? body : options.body,
                            icon: icon ? icon : options.icon,
                            // requireInteraction: true,
                            data: data
                        });
                        options.noticeList.push(options.notification);
                    }
                });
            }
        };
    
    
    
        //单击通知
        Notify.clickNotice = function() {
            if (options.notification != null) {
                options.notification.onclick = function() {
                    window.open(options.notification.data.url, '_blank');
                };
            }
    
        };
    
        //清除通知
        Notify.clearNotice = function() {
            // options.notification.close();
            options.noticeList[options.noticeList.length - 1].close();
            options.noticeList.pop();
        };
    
        //清除所有通知
        Notify.clearAllNotice = function() {
            for (var i = 0; i < options.noticeList.length; i++) {
                options.noticeList[i].close();
            }
        };
    
        //自动关闭
        Notify.autoClose = function(time) {
            if (options.notification != null) {
                time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
            }
        };
    
    
        //打开页面询问用户是否打开浏览器推送
        Notify.isNotice = function() {
            if (window.Notification) {
                // 支持
                console.log('yes');
            } else {
                console.log('no');
    
                // 不支持
            }
            console.log(Notification.permission);
            Notification.requestPermission(function(permission) {
                console.log(permission)
                if (permission === "granted") {
                    polling();
                    console.log(permission)
                    return;
                    //如果开启则开始轮询推送
                }else if(permission === "denied") {
                    console.log(permission)
                    //如果用户选择关闭则关闭轮询
                }
            });
        };
    
        function polling() {
            var open_notify_r =  localStorage.getItem('notify_switch');
            console.log(open_notify_r)
            if(open_notify_r != 'true') {
                console.log(open_notify_r)
                return;
            }
            inter = setInterval(function() {
                console.log(122121)
                $.ajax({
                    url: "轮询url",
                    dataType: "json",
                    success: function(res) {
                        if(res.rslt === 'succ'){
                            var data = res.data
                            for (var i = data.length - 1; i >= 0; i--) {
                                (function(item){
                                    Notify.showNotice(item.title, item.content, item.icon, item);
                                    Notify.clickNotice()
                                    Notify.autoClose(20000);
                                })(data[i])
                            }
                        }
    
                        // Notify.clearNotice();
                        // Notify.clearAllNotice();
    
                    }
                });
            }, 60000);
        }
    
        Notify.isNotice();
    
        $('#notify_switch').click(function() {
            if($(this).hasClass('is_open')) {
                $(this).removeClass('is_open').addClass('is_off');
                localStorage.setItem('notify_switch','false');
                clearInterval(inter);
            } else {
                $(this).removeClass('is_off').addClass('is_open');
                localStorage.setItem('notify_switch','true');
                clearInterval(inter);
                Notify.isNotice();
            }
        })
    })(window);
    
    
    一些注意注意事项

    1、一些内核下只支持https协议的页面获得推送权限。
    2、低版本的浏览器不支持此api
    3、有些浏览器(比如qq浏览器)默认会关闭所有网站获取通知的权利(在浏览器设置层面),这时js无能为力,只能是用户手动设置浏览器权限来达到获取通知的目的。

    展开全文
  • 从您的终端发送浏览器通知。 没有安装。 没有注册。 用法 Notica是Bash函数/别名,运行时会将通知发送到浏览器中的选项卡: $ long-running-command; notica Finished! 这将等到第一个命令完成后再运行Notica。 ...
  • 用于完成单元格的浏览器通知的Jupyter Magic 该软件包提供了Jupyter笔记本电脑电池魔术%%notify ,该组件可通过浏览器推送通知在用户可能长时间运行的电池单元完成时通知用户。 用例包括长期运行的机器学习模型,...
  • 浏览器扩展,在构建完成时发送浏览器通知。 产品特点 使用现代的基于Promise的browser.* APIs 。 。 具有自动版本控制的,并支持手动发布。 。 此扩展名已使用。 出版 通过创建以下ENV变量,可以一次发布到...
  • 浏览器通知程序ayzom

    2021-02-15 00:29:03
    浏览器通知程序ayzom
  • 声明式浏览器通知作为Web组件。 安装 使用 : $ npm install x-notification 用法 导入XNotification并注册。 < script type =" module " > import XNotification from '...
  • js实现浏览器通知功能

    千次阅读 2019-06-25 14:27:21
    Notification API是浏览器通知接口,用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知...

    概述

    Notification API是浏览器的通知接口,用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知栏。

    如果网页代码调用这个API,浏览器会询问用户是否接受。只有在用户同意的情况下,通知信息才会显示。

    下面的代码用于检查浏览器是否支持这个API。

    if (window.Notification) {
      // 支持
    } else {
      // 不支持
    }

    目前,Chrome和Firefox在桌面端部署了这个API,Firefox和Blackberry在手机端部署了这个API。

    if(window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function(status) {
            var n = new Notification('通知标题', { body: '这里是通知内容!' }); 
        });
    }

    上面代码检查当前浏览器是否支持Notification对象,并且当前用户准许使用该对象,然后调用Notification.requestPermission方法,向用户弹出一条通知。

    Notification对象的属性和方法

    Notification.permission

    Notification.permission属性,用于读取用户给予的权限,它是一个只读属性,它有三种状态。

    • default:用户还没有做出任何许可,因此不会弹出通知。
    • granted:用户明确同意接收通知。
    • denied:用户明确拒绝接收通知。

    Notification.requestPermission()

    Notification.requestPermission方法用于让用户做出选择,到底是否接收通知。它的参数是一个回调函数,该函数可以接收用户授权状态作为参数。

    复制代码

    Notification.requestPermission(function (status) {
          if (status === "granted") {
               var n = new Notification("Hi!");
           } else {
                alert("Hi!");
           }
    });

    复制代码

    上面代码表示,如果用户拒绝接收通知,可以用alert方法代替。

    Notification实例对象

    Notification构造函数

    Notification对象作为构造函数使用时,用来生成一条通知。

    var notification = new Notification(title, options);

    Notification构造函数的title属性是必须的,用来指定通知的标题,格式为字符串。options属性是可选的,格式为一个对象,用来设定各种设置。该对象的属性如下:

    • dir:文字方向,可能的值为auto、ltr(从左到右)和rtl(从右到左),一般是继承浏览器的设置。
    • lang:使用的语种,比如en-US、zh-CN。
    • body:通知内容,格式为字符串,用来进一步说明通知的目的。。
    • tag:通知的ID,格式为字符串。一组相同tag的通知,不会同时显示,只会在用户关闭前一个通知后,在原位置显示。
    • icon:图表的URL,用来显示在通知上。

    上面这些属性,都是可读写的。

    下面是一个生成Notification实例对象的例子。

    var notification = new Notification('收到新邮件', {
      body: '您总共有3封未读邮件。'
    });
    
    notification.title // "收到新邮件"
    notification.body // "您总共有3封未读邮件。"

    实例对象的事件

    Notification实例会触发以下事件。

    • show:通知显示给用户时触发。
    • click:用户点击通知时触发。
    • close:用户关闭通知时触发。
    • error:通知出错时触发(大多数发生在通知无法正确显示时)。

    这些事件有对应的onshow、onclick、onclose、onerror方法,用来指定相应的回调函数。addEventListener方法也可以用来为这些事件指定回调函数。

    notification.onshow = function() {
         console.log('Notification shown');
    };

    close方法

    Notification实例的close方法用于关闭通知。

    复制代码

    var n = new Notification("Hi!");
    // 手动关闭
    n.close();
    // 自动关闭
    n.onshow = function () { 
         setTimeout(n.close.bind(n), 5000); 
    }

    复制代码

    上面代码说明,并不能从通知的close事件,判断它是否为用户手动关闭。

    转自https://www.cnblogs.com/tianyuchen/p/5981066.html

    展开全文
  • 浏览器通知的设置

    2020-12-20 21:28:35
    禅道11.6.2版本开始,新增了浏览器通知的设置功能。可以设置是否打开浏览器通知,设置浏览器通知的轮询时间。备注:即便是浏览器通知是已打开状态,也还是要同意浏览器推送通知。开启浏览器通知时,可以在禅道系统...

    禅道11.6.2版本开始,新增了浏览器通知的设置功能。

    可以设置是否打开浏览器通知,设置浏览器通知的轮询时间。

    备注:即便是浏览器通知是已打开状态,也还是要同意浏览器推送通知。

    开启浏览器通知时,可以在禅道系统界面右下角接收到通知,且点击通知内容里的标题可以直接跳转到详情页面,比如需求、任务、Bug名称。

    下面我们来简单介绍一下浏览器通知的使用。

    一、浏览器通知的默认设置

    浏览器通知在后台--通知--浏览器里做设置。如果没有显示浏览器通知设置,需要联系管理员到组织--权限里分配浏览器设置的权限。

    浏览器通知默认是打开的状态,轮询时间为300秒。

    关闭浏览器通知后,将不会收到来自禅道系统的浏览器推送通知。

    也可以到设置里,设置哪些操作可以发送浏览器通知。

    二、浏览器通知的轮询时间

    你可以根据实际使用需要来设置轮询时间,轮询时间单位为秒。轮询时间越小,浏览器通知就越快。

    当然轮询时间也不是设置为越小越好,设置一个合适的轮询时间,可以有效减少服务器的负载压力。

    以我们默认的轮询时间为300秒为例,

    禅道系统把300秒内所有的操作,累积然后一次给用户发送浏览器通知,与禅道发信的异步发信比较类似。

    收到浏览器通知时,可以在禅道页面右下角收到以下的提示:

    展开全文
  • js chrome Notification 在windows任务栏上显示消息框
  • HTML5 Notification实现浏览器通知

    千次阅读 2018-12-11 19:39:53
    需求需要实现当浏览器最小化时,如果有新通知,实现浏览器闪烁,或者实在不行在浏览器标题栏闪烁(这个似乎相当于没有通知。。)。基于技术研究的目的,在网络上查找有没有相关实现方式,发现,大多不是真正的实现...
  • 原始的chrome扩展名,在单击图标时显示浏览器通知。 它包含的有效答案 如何使用: 打开chrome:// extensions / 启用开发者模式 点击“打开包装” 定位并加载该文件夹 在浏览器扩展列表中找到一个新图标,然后...
  • ScratchNotifier 在Scratch上收到新消息时,获取浏览器通知
  • JS 实现浏览器滚动显示、声音提醒系统通知
  • 浏览器通知push.js 工具(实用)

    千次阅读 2019-03-28 20:04:15
    HTML5 中的 JavaScript Web Notification API 允许桌面和移动浏览器显示包含自定义内容的通知。JavaScript Web Notification API 现在与大多数现代浏览器兼容,我们已经看到它在许多网站和应用程序中实现。 ...
  • Notification浏览器通知
  • 浏览器消息通知案例

    2022-04-19 16:10:53
    <!DOCTYPE html> <... <...H5的Notification-Web的桌面通知功能</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type='text/javascript'><...
  • JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知
  • 代码如下 David Notification show Notification 注意事项 1、如果不显示,注意下windows通知设置,右下角消息->右击->专注助手->关闭 2、浏览器兼容情况如下: 查询地址:...
  • React 轮询并弹出浏览器通知(Notification) Notification是H5新增属性,目前应该是除IE外其他浏览器都兼容 点我可以看Notification的完整api 需求是进入页面后开始轮询,然后符合条件的话弹出浏览器通知框 一、...
  • vue+Notification(浏览器通知

    千次阅读 2021-05-17 14:40:03
    // 浏览器通知--window.Notification if (Notification.permission == "granted") { console.log("允许通知") }else if( Notification.permission != "denied"){ console.log("需要通知权限") .
  • html5 浏览器消息通知(Notification)

    千次阅读 2019-04-09 17:41:56
    设置允许浏览器通知(仅支持https): 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tip</title> <script type="text/...
  • push.js:一个小巧的,跨浏览器的 JavaScript 通知 API 的解决方案
  • jquery通知提示

    2016-02-22 09:37:32
    基于bootstap的样式和jquery,自己开发的一个浏览器右下角显示通知提示信息的组件。
  • chrome浏览器桌面通知简介用于其余B / S下的网络办公提醒功能。页面最小化的状态下发送通知仍显示在屏幕的右下角,马上可以看到内容依赖PC chrome浏览器。手机android海豚浏览器firefox可用但是智能展示一个通知(不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 216,574
精华内容 86,629
关键字:

浏览器通知

友情链接: encoded.zip