专栏首页web开发HTML5中的Web Notification桌面通知

HTML5中的Web Notification桌面通知

大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在这里简单的介绍一下如何实现这样的功能。

1、实现标签页闪烁效果

实现的效果:

当前窗体失焦的时候,标题开始闪动,当前窗体获取焦点的时候,则停止闪动。

注意:这里需要用到窗口的获取焦点和失去焦点的方法,由于IE和其他Chrome及FireFox的区别,这里需要用到的方法就不一样,具体是:

  Chrome和FireFox浏览器是window的onfocus, onblur方法;而IE浏览器则是document的onfocusin, onfocusout方法

下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签页标题闪烁</title>
</head>
<body>
<h2>浏览器窗体获得焦点则停止标题闪烁通知+失去焦点则开启标题闪烁通知</h2>
<script>
//    窗体失焦的时候,标题就会闪。
//    这里有一个小的知识点,就是浏览器窗体获得焦点和失去焦点,Chrome和FireFox浏览器是window的onfocus, onblur方法;而IE浏览器则是document的onfocusin, onfocusout方法,因此有:
    var titleInit = document.title, isShine = true;
    setInterval(function() {
        var title = document.title;
        if (isShine == true) {
            if (/新/.test(title) == false) {
                document.title = '【你有新消息】';
            } else {
                document.title = '【     】';
            }
        } else {
            document.title = titleInit;
        }
    }, 500);

    // for Chrome and FireFox
    window.onfocus = function() {
        console.log(123);
        isShine = false;
    };
    window.onblur = function() {
        isShine = true;
    };

    // for IE
    document.onfocusin = function() {
        isShine = false;
    };
    document.onfocusout = function() {
        isShine = true;
    };
</script>
</body>
</html>

在浏览器打开该页面,再随意打开其他一个标签页,测试效果如下:

2、实现屏幕右侧消息通知

先直接贴出代码吧

test2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>测试消息通知</h2>

<script>
    window.onload = function () {
        suportNotify()
    }

    //判断浏览器是否支持Web Notifications API
    function suportNotify(){
        if (window.Notification) {
            // 支持
            console.log("支持"+"Web Notifications API");
            //如果支持Web Notifications API,再判断浏览器是否支持弹出实例
            showMess()
        } else {
            // 不支持
            alert("不支持 Web Notifications API");
        }
    }

    //判断浏览器是否支持弹出实例
    function showMess(){
        setTimeout(function () {
            console.log('1:'+Notification.permission);
            //如果支持window.Notification 并且 许可不是拒绝状态
            if(window.Notification && Notification.permission !== "denied") {
                //Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示
                Notification.requestPermission(function(status) {
                    console.log('2: '+status);
                    //如果状态是同意
                    if (status === "granted") {
                        var m = new Notification('收到信息', {
                            body: '这里是通知内容!你想看什么客官?',  //消息体内容
                            icon:"images/img1.jpg"  //消息图片
                        });
                        m.onclick = function () {//点击当前消息提示框后,跳转到当前页面
                            window.focus();
                        }
                    } else{
                        alert('当前浏览器不支持弹出消息')
                    }
                });
            }
        },1000)
    }
</script>
</body>
</html>

Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示,在mac下,如图所示:

点击了允许后,则当前域名的网站就被允许在该电脑上出现通知弹框,以谷歌浏览器为例,这时依次点击:设置——高级——内容设置——通知,就可以在允许下面看到刚才点击了允许通知的站点的地址,如图:

此时,localhost:63342站点就可以出现通知消息了(消息通知弹窗在Mac和windows两个系统下可能出现的位置有些不一样,自己设置的logo出现的位置也会有些不同),Mac的消息通知窗口是从屏幕右上角出来的(Windows应该是从右下角出来),效果如图:

此时,只要当前页面没有关闭,不管你当前浏览的是其他页面还是其他应用,有消息通知时,屏幕右侧都会出现消息通知的弹框,点击消息提示框,这会跳转到消息页面。

注意:如果用的是Chrome浏览器的新版本,则必须是https协议,消息通知方可有效(当然如果是自己做测试,在本机用本地ip,则无所谓http还是https),chrome的旧版本则没有这一限制(具体到哪个版本为界限,就不清楚)

本篇博客也只是简单的记录一下如何实现这样的消息通知效果,想了解更详细的知识点,可以参考张鑫旭大神的博客:

http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript前端和Java后端的AES加密和解密

    在实际开发项目中,有些数据在前后端的传输过程中需要进行加密,那就需要保证前端和后端的加解密需要统一。这里给大家简单演示AES在JavaScript前端和Java...

    用户1174387
  • 移动端打印输出内容以及网络请求-vconsole.js

    今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求。下面记录使用方式。 1、下载vco...

    用户1174387
  • 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的u...

    用户1174387
  • 源码阅读SourceInsight与静态反汇编IDA Pro

    Sourceinsight可以方便的查看函数调用关系,点击图标

    sofu456
  • 第51次文章:JQuery高级

    上周我们聊了一下jQuery的基础部分,这周我们把jQuery的高级部分学习一下吧!同时也预祝各位小伙伴新年快乐!

    鹏-程-万-里
  • 我终于弄懂了Python的装饰器(二)

    结果一样。my_decorator”被调用了。因此,当您使用时@my_decorator,您要告诉Python,通过变量来调用my_decorator标记了的函...

    BigYoung小站
  • 工作中问题记录

    01.06 ? 一月 06, 2018 10:21:07 上午 org.apache.coyote.http11.AbstractHttp11Processor...

    二十三年蝉
  • 物联网将彻底改变个人金融的三种方式

    物联网技术仍在稳步发展,引领着科技潮流,改变着我们的生活方式。事实上,个人理财只是它将发生巨大变化的一个方面。其不断增长的势头和强大的影响力已使分析人士将其视为...

    用户4122690
  • 分布式监控系统Zabbix--完整安装记录 -添加apache监控

    前面介绍了zabbix3.0.3环境及相关监控项的添加,下面介绍下针对apache的监控配置: 1)在apache配置文件中打开server-status状态访...

    洗尽了浮华
  • BAT 企业技术架构

    统一提供资源分配,数据备份,迁移,容灾,读写分离,分库分表,满足资源的利用率问题,运维效率问题

    用户7657330

扫码关注云+社区

领取腾讯云代金券