JS 实现浏览器通知

jaywcjlove 4年前

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

这是重复造轮子...,标题闪烁、或者滚动提示,favicon数字显示。打开chrome浏览器调试工具,按照下面截图的方式放到调试里面调用一下,你就可以看到效果了。




## 下载

### npm

<br /> $ npm install title-notify<br />


### bower

<br /> $ bower install inotify<br />

## init

effect: flash | scroll | favicon  

js&nbsp;<br /> iNotify.init({<br /> &nbsp; &nbsp; message: '有消息了。',//标题<br /> &nbsp; &nbsp; effect: 'flash', // flash | scroll 闪烁还是滚动<br /> &nbsp; &nbsp; //可选播放声音<br /> &nbsp; &nbsp; audio:{<br /> &nbsp; &nbsp; &nbsp; &nbsp; file: 'msg.mp4'<br /> &nbsp; &nbsp; },<br /> &nbsp; &nbsp; //标题闪烁,或者滚动速度<br /> &nbsp; &nbsp; interval: 1000,<br /> &nbsp; &nbsp; //可选,默认绿底白字的 &nbsp;Favicon<br /> &nbsp; &nbsp; updateFavicon:{<br /> &nbsp; &nbsp; &nbsp; &nbsp; // favicon 字体颜色<br /> &nbsp; &nbsp; &nbsp; &nbsp; textColor: "#fff",<br /> &nbsp; &nbsp; &nbsp; &nbsp; //背景颜色,设置背景颜色透明,将值设置为“transparent”<br /> &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: "#2F9A00"&nbsp;<br /> &nbsp; &nbsp; },<br /> &nbsp; &nbsp; //可选chrome浏览器通知,默认不填写就是下面的内容<br /> &nbsp; &nbsp; notification:{<br /> &nbsp; &nbsp; &nbsp; &nbsp; title:"通知!",//设置标题<br /> &nbsp; &nbsp; &nbsp; &nbsp; icon:"",//设置图标 icon 默认为 Favicon<br /> &nbsp; &nbsp; &nbsp; &nbsp; body:'您来了一条新消息'//设置消息内容<br /> &nbsp; &nbsp; }<br /> })<br />

## 声音设置

### player
播放声音

js<br /> iNotify.player()<br />

### loopPlay
自动播放声音

js<br /> iNotify.loopPlay()<br />

### stopPlay
停止播放声音

js<br /> iNotify.stopPlay()<br />

### setURL
设置播放声音URL

js<br /> iNotify.setURL()<br />

## title通知

### setTitle
设置标题  

js<br /> iNotify.setTitle('新标题')<br />


### setInterval
设置时间间隔  

js<br /> iNotify.setInterval(2000)<br />

### addTimer
添加计数器

js<br /> iNotify.addTimer()<br />

### clearTimer
清除计数器  

js<br /> iNotify.clearTimer()<br />

## favicon通知

### setFavicon
设置icon 显示数字

js<br /> iNotify.setFavicon(10)<br />

### faviconClear
清除数字显示原来的icon

js<br /> iNotify.faviconClear()<br />

## chrome通知

### notify
弹出chrome通知,不传参数为预设值...

js<br /> iNotify.notify();&nbsp;<br /> iNotify.notify({<br /> &nbsp; &nbsp; title:"新通知"<br /> &nbsp; &nbsp; body:"打雷啦,下雨啦..."<br /> });<br />

## 其它

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


## 例子


### 实例一

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

### 实例二

js<br /> var notify = iNotify.init({<br /> &nbsp; &nbsp; effect: 'flash',<br /> &nbsp; &nbsp; interval: 500<br /> });<br /> notify.setFavicon("1")<br />

### 实例三

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

### 实例四

js<br /> var iN = iNotify.init().setFavicon(5);<br />


### 实例五

js<br /> var iN = iNotify.init({<br /> &nbsp; &nbsp; effect: 'flash',<br /> &nbsp; &nbsp; interval: 500,<br /> &nbsp; &nbsp; message:"有消息拉!",<br /> &nbsp; &nbsp; audio:{<br /> &nbsp; &nbsp; &nbsp; &nbsp; file: 'msg.mp4'<br /> &nbsp; &nbsp; }<br /> }).setFavicon(10).player();<br />


### 实例五

js<br /> var iN = iNotify.init({<br /> &nbsp; &nbsp; effect: 'flash',<br /> &nbsp; &nbsp; interval: 500,<br /> &nbsp; &nbsp; message:"有消息拉!",<br /> &nbsp; &nbsp; audio:{<br /> &nbsp; &nbsp; &nbsp; &nbsp; file: 'msg.mp4'<br /> &nbsp; &nbsp; },<br /> &nbsp; &nbsp; notification:{<br /> &nbsp; &nbsp; &nbsp; &nbsp; title:"通知!",<br /> &nbsp; &nbsp; &nbsp; &nbsp; icon:"",<br /> &nbsp; &nbsp; &nbsp; &nbsp; body:'您来了一条新消息'<br /> &nbsp; &nbsp; }<br /> }).setFavicon(10).player();<br /> <br /> //弹出chrome通知,不传参数为预设值...<br /> iN.notify();&nbsp;<br /> <br /> iN.notify({<br /> &nbsp; &nbsp; title:"新通知"<br /> &nbsp; &nbsp; body:"打雷啦,下雨啦..."<br /> });&nbsp;<br />