近期在做公司后台管理系统,当有任务到来时,须要通知当事人,可是 当事人有可能在做别的,浏览器有可能会被最小化,这样就非常难看到通知了。经过查找发现有些浏览器能够使用noitfications。能够在桌面的通知区域内显示一个提示框,而且显示在桌面的最前面,非常方便就能看到了。我就将它简单的封装一下,使其符合经常使用的使用场景。

功能效果类似webQQ的消息提示通知。

chrome
浏览器桌面通知

简单介绍

用于其余B/S下的网络办公提醒功能。

页面最小化的状态下发送通知

依旧显示在屏幕的右下角,立即能够看到内容

依赖

  1. PC chrome浏览器。
  2. 手机android 海豚浏览器

注意事项

通知权限是基于站点(或者域名),同一个站点以下的页面仅仅须要获取一次权限就可以。

假设别禁用了。将不会显示通

设置-》隐私设选以下的 “内容设置”-》通知

知的,也无法再次获取权限了。

能够同浏览器的菜单查看权限。

设置-》隐私设选以下的 “内容设置”-》通知

假设你关闭或者刷新页面了。之前的通知就没法控制了 。

使用

  1. 引用notify.js文件

    <script src="notifiy.js"></script>
    
  2. 浏览器配置

    检查浏览器是否支持桌面通知功能

    Notifier.HasSupport();
    

    获取同意桌面通知权限

    Notifier.RequestPermission();
    
  3. 设置通知显示方式(可选。不设置採用默认模式)

     Notifier.ModelAll();       //默认方式,显示全部的。在linux一般为三个。在window显示在通知区域。
    Notifier.ModelUpdate(); //更新模式,显示在上一个通知的位置,
    Notifier.ModelCount(c); //限制当前页面显示的通知个数,默觉得三个(能够通过參数c改变个数)。超出限制时关闭最早的通知,
    NOtifier.ModelTimeout(ct); //超时消失模式。显示一定时间自己主动消失。
  4. 发送通知

    Notifier.Notify(icon, title, message); //显示桌面通知,icon:图片的地址  title:通知的标题 message:通知的内容
    
  5. 关闭的方法

     Notifier.Clse(type);    //type=1 关闭上一个 其它值 关闭最早打开的
    Notifier.ClosePre(); //关闭近期个打开的通知
    Notifier.CloseLast(); //关闭最早显示的通知
    NOtifier.CloseAll(); //关闭全部通知
  6. 其它方法

    Notifier.GetPermission();   //获取关于通知使用权限,0,已经得到权限 1,须要获取权限 2,禁止使用
    Notifier.IsGetPermission(); //是否已经获取通知的使用权限
    Notifier.Disable(); //是否禁用通知

浏览器桌面通知(notifications)的更多相关文章

  1. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

  2. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  3. 浏览器桌面通知Notification实践

    一言不合就上图: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差 ...

  4. H5 notification浏览器桌面通知

    Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...

  5. HTML5开启浏览器桌面通知 Web Notification

    说明: 1.Chrome要求必须https才可以开启浏览器通知 2.显示图片在本服务器,不支持跨越 3.自定义声音Chrome不播放,Firefox正常播放 代码如下: <!-- /** * @ ...

  6. Chrome浏览器桌面通知提示设置

    版本 24.0.1312.56 m     老版本23.* 桌面通知,也可以由用户在Chrome浏览器中自定义:板手 -> 选项  -> 高级选项 –> 通知 (管理例外情况…).

  7. 用于浏览器桌面通知的Web API 接口 -notification

    notification 接口用于浏览器向用户提供通知内容:常见的如网页版的微信: 1.实现,需要Notifications API 提供的通知接口: 用法: let notification = n ...

  8. Chrome浏览器桌面通知提示功能使用

    http://www.cnblogs.com/meteoric_cry/archive/2012/03/31/2426256.html

  9. HTML5桌面通知(Web Notifications)实例解析

    先上一段代码,ie不支持,Chrome.fireFox.Opera支持 <!DOCTYPE html> <html> <head> <meta http-eq ...

随机推荐

  1. python刷取CSDN博文访问量之四

    python刷取CSDN博文访问量之四 作者:vpoet #coding:utf-8 import requests import urllib2 import re import time def ...

  2. 【转】DynDNS使用随笔

    暂且小结一下: 1.下载编译客户端代码并交叉编译 首先,按照网上提示的步骤,在www.dyndns.com注册了帐号,并申请了域名,绑定了IP; 然后,在站点中找到客户端源码,其中ddclient是p ...

  3. Unity 调用android插件

    1. Unity的Bundle Identifier必须和你的android报名一致 Activity和View的区别: Activity应该是一个展示页面,View是页面上一些按钮视图等等. 如何调 ...

  4. Struts2(一)——总体介绍

    这篇博客开始将总结一下有关框架的知识,在开发中合适的利用框架会使我们的开发效率大大提高.当今比较流行的开源框架: 关注数据流程的MVC框架 (Struts1/2, WebWork, Spring MV ...

  5. uva 10911 - Forming Quiz Teams(记忆化搜索)

    题目链接:10911 - Forming Quiz Teams 题目大意:给出2 * n个选手的坐标, 要求将所有的选手分成n组, 每组两个人, 所有组的两个人之间的距离之和要最小, 输出最小值. 解 ...

  6. hdu 4930 Fighting the Landlords--2014 Multi-University Training Contest 6

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4930 Fighting the Landlords Time Limit: 2000/1000 MS ...

  7. VisualStudio.DTE 对象可以通过检索 GetService() 方法

    DTE dte = (DTE)GetService(typeof(DTE)); string solutionDir = System.IO.Path.GetDirectoryName(dte.Sol ...

  8. JDBC插入百万数据,不到5秒!

    java自带的批量操作,就可以很好的支持大量数据的处理.相比c#,简单很多.c#要使用oracle提供的ODP.NET,效率才很高,但是代码却很复杂.总之,在这方面,c#没得比.当然,这里的表是没加索 ...

  9. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  10. 自学Android的第一个小程序(小布局、button点击事件、toast弹出)

    因为上班,学习时间有限,昨晚才根据教程写了一个小程序,今天忙里偷闲写一下如何实现的,来加深一下印象. 首先创建一个Android项目, 通过activity_xxx.xml布局文件来添加组件来达到自己 ...