JS 实现的浏览器系统通知 iNotify.js

注：本分非原创；信息来源 oschina

授权协议:MIT

开发语言:JavaScript

操作系统:跨平台

软件作者:同一种调调

iNotify.js 详细介绍

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

下载

 $ npm install title-notify --save-dev
 $ bower install inotify --save-dev

编译

 # 下载依赖工具
 $ npm install
 # 压缩inotify
 $ npm build

init

effect: flash | scroll | favicon

 var iNotify = new iNotify().init()
 //推荐下面写法
 var iNotify = new iNotify({
     message: '有消息了。',//标题
     effect: 'flash', // flash | scroll 闪烁还是滚动
     openurl:"http://www.bing.com", // 点击弹窗打开连接地址
     onclick:function(){ //点击弹出的窗之行事件
        console.log("---")
     },
     //可选播放声音
     audio:{
         //可以使用数组传多种格式的声音文件
         file: ['msg.mp4','msg.mp3','msg.wav']
         //下面也是可以的哦
         //file: 'msg.mp4'
     },
     //标题闪烁，或者滚动速度
     interval: 1000,
     //可选，默认绿底白字的  Favicon
     updateFavicon:{
         // favicon 字体颜色
         textColor: "#fff",
         //背景颜色，设置背景颜色透明，将值设置为“transparent”
         backgroundColor: "#2F9A00"
     },
     //可选chrome浏览器通知，默认不填写就是下面的内容
     notification:{
         title:"通知！",//设置标题
         icon:"",//设置图标 icon 默认为 Favicon
         body:'您来了一条新消息'//设置消息内容
     }
 })

isPermission

判断浏览器弹框通知是否被阻止。

 iNotify.isPermission()

声音设置

player

播放声音

 iNotify.player()

loopPlay

自动播放声音

 iNotify.loopPlay()

stopPlay

停止播放声音

 iNotify.stopPlay()

setURL

设置播放声音URL

 iNotify.setURL('msg.mp3')// 设置一个
 iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个

title通知

 最新的版本默认不播放标题闪烁动画，初始化之后需要调用 setTitle(true) 方法才播放标题动画。

setTitle

设置标题，

 iNotify.setTitle(true)//播放动画
 iNotify.setTitle('新标题')//闪烁新标题
 iNotify.setTitle()//清除闪烁 显示原来的标题

setInterval

设置时间间隔

 iNotify.setInterval(2000)

addTimer

添加计数器

 iNotify.addTimer()

clearTimer

清除计数器

 iNotify.clearTimer()
 

favicon通知

setFavicon

设置icon 显示数字

 iNotify.setFavicon(10)
 

faviconClear

 清除数字显示原来的icon
 iNotify.faviconClear()
 

chrome通知

notify

 弹出chrome通知，不传参数为预设值...
 iNotify.notify();
 iNotify.notify({
     title:"新通知",
     body:"打雷啦，下雨啦...",
     openurl:"http://www.bing.com",
     onclick:function(){
        console.log("---")
     }
 });
 

其它

 iNotify.init().title; 获取标题

例子

 new iNotify({
     effect: 'flash',
     interval: 500
 })

 上面的例子跟下面的是一样的
 new iNotify().init({
     effect: 'flash',
     interval: 500
 });
 

实例一

 function iconNotify(num){
     if(!notify) {
         var notify = new iNotify().init({
             effect: 'flash',
             interval: 500
         });
     }
     if(num===0){
         notify.faviconClear()
         notify.setTitle();
     }else if(num<100){
         notify.setFavicon(num)
         notify.setTitle("有新消息！");
     }else if(num>99){
         notify.setFavicon('..')
         notify.setTitle("有新消息！");
     }
 }

实例二

 var notify = new iNotify().init({
     effect: 'flash',
     interval: 500
 });
 notify.setFavicon("")

实例三

 var iN = new iNotify().init({
     effect: 'flash',
     interval: 500,
     message:"有消息拉！",
     updateFavicon:{//可选，默认绿底白字
         textColor: "#fff",// favicon 字体颜色
         backgroundColor: "#2F9A00" //背景颜色
     }
 }).setFavicon(10);

实例四

 var iN = new iNotify().init().setFavicon(5);

实例五

 var iN = new iNotify().init({
     effect: 'flash',
     interval: 500,
     message:"有消息拉！",
     audio:{
         file: 'msg.mp4'
     }
 }).setFavicon(10).player();

实例五

 var iN = new iNotify().init({
     effect: 'flash',
     interval: 500,
     message:"有消息拉！",
     audio:{
         file: 'msg.mp4'//可以使用数组传多种格式的声音文件
     },
     notification:{
         title:"通知！",
         icon:"",
         body:'您来了一条新消息'
     }
 }).setFavicon(10).player();

 //弹出chrome通知，不传参数为预设值...
 iN.notify();

 iN.notify({
     title:"新通知",
     body:"打雷啦，下雨啦..."
 });

实例六

 var iN =  new iNotify({
     effect: 'flash',
     interval: 500,
     message:"有消息拉！",
     audio:{
         file: ['msg.mp4','msg.mp3','msg.wav']
     },
     notification:{
         title:"通知！",
         body:'您来了一条新消息'
     }
 })

 iN.setFavicon(10).player();

 var n = new iNotify()
 n.init({
     effect: 'flash',
     interval: 500,
     message:"有消息拉！",
     audio:{
         file: ['openSub.mp4','openSub.mp3','openSub.wav']
     },
     notification:{
         title:"通知！",
         icon:"",
         body:'您来了一个客户'
     }
 })

 n.setFavicon(10).player();

jaywcjlove/iNotify                                                                                                                                                                                                Star 334| Fork 101

JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖。https://github.com/jaywcjlove/iNotify

最近提交:

• 40af7d0f2 released v1.0.13                                                                                                                                                                                                            jaywcjlove 2017-03-05 02:55

• eb5101c97 美化代码 (6)                                                                                                                                                                                                                    Binbin Ma 2017-03-04 23:10

• 0bbfc4e74 update README.md                                                                                                                                                                                                     jaywcjlove 2016-11-14 17:29

---

master分支 代码最近更新：2017-03-05                                                                                                                                                                                                  下载