文档章节

web实现消息推送及桌面提醒

王福林
 王福林
发布于 2017/09/06 08:47
字数 706
阅读 30
收藏 0
点赞 0
评论 0

就类似我们之前描述的,来一个 HTML5 提醒面板,再放一段语音。这个就有些类似12306 的抢票了。

还是先看下我们的效果图:

image

我们重点说下 HTML5 Notification

Notification 从字面意思理解就是”提醒”、”注意”的意思。所以它的作用就是,我们在忙于其他工作时,也可以收到来自页面的消息通知,例如一个新订单或者新邮件来了。

作为 HTML5 的新东西,主流浏览器除了 IE 以外,其他浏览器较高版本都支持,只是有些样式的不同而已。

所以我们使用这些新特性的时候还是要考虑下用户的情况。

具体代码实现:

//浏览器兼容性处理
var Notification = window.Notification || 
                    window.mozNotification || 
                    window.webkitNotification;

var media = new Audio("http://****.mp3");  //语音地址

function showNotice(title,msg){
 if(Notification){
    Notification.requestPermission(function(status){
        //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
        if("granted" != status){
            return;
        }else{
            var tag = "order"+Math.random();  //产生随机tag,方便点击的时候定位处理
            var notify = new Notification(
                title,
                {
                    tag:tag,
                    icon:'http://******.png',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
                    body:msg //通知的具体内容
                }
            );
            notify.onclick=function(){
                //如果通知消息被点击,通知窗口将被激活
                media.pause();
                window.focus();
                notify.close();
            };
            notify.onerror = function () {
                console.log("HTML5桌面消息出错!!!");
            };
            notify.onshow = function () {
                media.play();

                //5s 后自行停止通知
                setTimeout(function () {
                        notify.close();
                        media.pause();
                    }, 5000);
                }
            };
            notify.onclose = function () {
                console.log("HTML5桌面消息关闭!!!");
                media.pause();
            };
        }
    });
  }else{
    console.log("您的浏览器不支持桌面消息");
  }
};

具体的基本使用方法就是这些。我们最好还是了解下它的详细属性。

image

但是很多属性在使用过程中没有发现具体的作用,除了上面代码中使用到的,我只发现了两个比较有用的:

  1. image 给通知添加一个图片内容。如图:

image

  1. requireInteraction 。字面意思是 “需要互动、合作”,表示无法理解。
    默认为 false ,如果不处理提醒,系统会在20s之后会调用 onclose 事件,提醒自动消失;
    如果为 true ,我们会发现,系统不会自动进入 onclose ,消息是永久的,直到我们手动处理。所以这个属性可以创建持续性提醒面板。

比如这里我需要创建一个持续性提醒cms管理员有新订单,我们修改其中的一些方法:

var clickFlag=false; //是否已经点击
notify.onclick=function(){
     //如果通知消息被点击,通知窗口将被激活
     media.pause();
     window.focus();
     notify.close();
     clickFlag=true;  //通知已点
};

notify.onshow = function () {
     media.play();
     if(!clickFlag) {
         //每5s提醒一次
        setTimeout(function () {
           //notify.close();
           //media.pause();
           notify.onshow();
        }, 5000);
     }
  };

  notify.onclose = function () {
       console.log("HTML5桌面消息关闭!!!");
       media.pause();
       clickFlag=true;
   };

以上就是简单实现web消息推送及桌面提醒的全部内容。

本文转载自:http://imayi.me/2017/01/23/web%E5%AE%9E%E7%8E%B0%E6%B6%88%E6%81%AF%E6%8E%A8%E9%80%81%E5%8F%8A%E6%A1%

共有 人打赏支持
王福林
粉丝 9
博文 93
码字总数 36521
作品 0
徐汇
程序员
即时通讯项目 - LuliChat

LuliChat是一个以Nutz为后台支撑,T-io为通讯支持,LayIM为前台UI交互的纯国产框架开发的一个即时通讯项目。 没有高端的架构,没有难以理解的高层次封装,一切从简,只为实现功能,可乃新手学...

蛋蛋i ⋅ 2017/12/20 ⋅ 1

web消息推送notification的应用

最近使用国外的一些站点发现一个问题,例如FB,我打开浏览器明明没有打开FB怎么win下面会弹出FB的消息提醒?这个到底是怎么做到的呢~? 在浏览国内的一些站点貌似都没有这么做的,但是深入研...

leicc ⋅ 2016/03/02 ⋅ 1

【JSConf EU 2018】有关浏览器弹出式窗口的相关探讨

在前端大爆发的今天,随着层出不穷的新技术和新框架的不断推出和W3C标准的不断更新,前端开发已经不局限于展示服务端返回的信息,而更多的去关注功能,这也带给了我们更多思考。 本次JSCONF2...

soyo_su ⋅ 06/13 ⋅ 0

Firefox 17 Beta 发布

Firefox 保持速度,紧接着将 17 推送到 Beta 更新渠道。 桌面版本更新有: 启用危险插件点击播放策略。对于有安全隐患的旧插件,用户在收到安全提醒后需要手动点击才可使用。进一步避免老版本...

oschina ⋅ 2012/10/12 ⋅ 22

HTML5 桌面通知:Notification API 的应用

先看效果: image.png 这是利用html5桌面通知Notification API实现的,先看看代码,再分析Notification。 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱...

极客教程 ⋅ 2017/10/24 ⋅ 0

Windows Phone 7 学习笔记 - 推送通知服务

大家都知道windows phone值允许一个第三方的应用程序在前台运行,所以应用程序就不能在后台从服务器上取数据。所以微软提供推送通知服务给第三方应用程序取得更新通知的消息,让用户觉得这个...

虫虫 ⋅ 2012/02/21 ⋅ 0

服务器向客户端监控并推送消息提醒

服务器向客户端监控并推送消息提醒 例如:服务器监控数据库,当前登陆这个人是否今天打过卡,如果没打,客户机就每个1小时提醒他. 技术:java服务器推送 vb接受消息提醒 不知道百度云推送,客...

yuanxu_zhao ⋅ 2015/03/16 ⋅ 2

Apache Cordova 开发移动平台上的 Chrome Apps

据去年9月份的消息,Chrome Apps将可以像原生应用一样在各终端设备上离线运行,目前已经做到兼容了所有的桌面平台。而现在通过一个基于Apache Cordova的开发者预览版工具包,Chrome Apps已经...

oschina ⋅ 2014/02/05 ⋅ 8

推送服务要选真正实现互动的

在信息化高度发达的现在,手机已成为人们生活不可或缺的一部分,尤其是在智能手机出现之后。移动互联网时代的到来为我们的生活给予了极大地方便,但也随之带来许多问题,最突出的当属手机消息...

1113582586 ⋅ 2014/04/25 ⋅ 1

三分钟实现小程序模版消息推送 | 基于Bmob后端云

三分钟实现小程序模版消息推送 | 基于Bmob后端云 image 作为小程序的开发者你一定会遇到这样子的需求: 例如: 当用户购买后,你想向用户发送消息提醒用户已经发货; 当用户购买VIP后,你想向...

大王12 ⋅ 2017/12/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

服务网关过滤器

过滤器作用 我们的微服务应用提供的接口就可以通过统一的API网关入口被客户端访问到了。但是,每个客户端用户请求微服务应用提供的接口时,它们的访问权限往往都需要有一定的限制,系统并不会...

明理萝 ⋅ 1分钟前 ⋅ 1

【2018.06.21学习笔记】【linux高级知识 14.1-14.3】

14.1 NFS介绍 14.2 NFS服务端安装配置 14.3 NFS配置选项

lgsxp ⋅ 9分钟前 ⋅ 0

Day18 vim编辑模式、命令模式与练习

编辑模式 命令模式 :nohl 不高亮显示 :x与:wq类似,如果在更改文件之后操作,两者效果一样;如果打开文件,没有任何操作; :wq会更改mtime,但是:x不会。 练习题 扩展 vim的特殊用法 ht...

杉下 ⋅ 13分钟前 ⋅ 0

Enum、EnumMap、EnumSet

1、Enum 不带参数 public enum Car { AUDI { @Override public int getPrice() { return 25000; } }, MERCEDES { ......

职业搬砖20年 ⋅ 13分钟前 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 15分钟前 ⋅ 0

线程组和 ThreadLocal

前言 在上面文章中,我们从源码的角度上解析了一下线程池,并且从其 execute 方法开始把线程池中的相关执行流程过了一遍。那么接下来,我们来看一个新的关于线程的知识点:线程组。 线程组 ...

猴亮屏 ⋅ 16分钟前 ⋅ 0

相对路径和绝对路径

基本概念   文件路径就是文件在电脑中的位置,表示文件路径的方式有两种,相对路径和绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。   物理路径:物理路...

临江仙卜算子 ⋅ 20分钟前 ⋅ 0

消息队列属性及常见消息队列介绍

什么是消息队列? 消息队列是在消息的传输过程中保存消息的容器,用于接收消息并以文件的方式存储,一个队列的消息可以同时被多个消息消费者消费。分布式消息服务DMS则是分布式的队列系统,消...

中间件小哥 ⋅ 22分钟前 ⋅ 0

java程序员使用web3j进行以太坊开发详解

如何使用web3j为Java应用或Android App增加以太坊区块链支持,教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤器...

笔阁 ⋅ 23分钟前 ⋅ 0

vim编辑模式、vim命令模式

vim编辑模式 使用vim filename 进入的界面是一般模式,在这个模式下虽然我们能够查看,复制,剪切,粘贴,但是不能编辑新的内容,如何能直接写入东西呢?这就需要进入编辑模式了,从一般模式...

李超小牛子 ⋅ 25分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部