iNotify.js主要是调用Chrome、Firefox、Safari等浏览器提供的系统通知API,实现浏览器系统通知,实现title标签闪烁、滚动、声音提示。favicon图标数字信息通知,声音播放等.....
例子Demo预览,文档中找哦
下载# v2.x$ npm install @wcjiang/notify --save# v1.x $ npm install title-notify --save使用import Notify from '@wcjiang/notify';const notify = new Notify({ message: '有消息了。', // 标题 effect: 'flash', // flash | scroll 闪烁还是滚动 openurl:'https://github.com/jaywcjlove/iNotify', // 点击弹窗打开连接地址 onclick: () => { // 点击弹出的窗之行事件 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:'您来了一条新消息', // 设置消息内容 }});notify.player();
在您的HTML中手动下载并引入 notify.js,你也可以通过 UNPKG 进行下载:
var notify = new Notify({ effect: 'flash', interval: 500,});notify.setFavicon('1');optionmessage:String标题
effect:String,flash|scroll|favicon闪烁还是滚动
audio:可选播放声音
file:String/Array可以使用数组传多种格式的声音文件
interval:Number标题闪烁,或者滚动速度
openurl:String点击弹窗打开连接地址
onclick:Function弹窗点击事件
updateFavicon:设置Favicon图标颜色
textColor:设置favicon字体颜色
backgroundColor:背景颜色,设置背景颜色透明,将值设置为 transparent
notification:可选chrome浏览器通知,默认不填写就是下面的内容
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)setFaviconColor设置icon显示文本颜色
iNotify.setFaviconColor('#0043ff')setFaviconBackgroundColor设置icon显示文本颜色
iNotify.setFaviconBackgroundColor('#0043ff')// 设置字体和背景颜色iNotify.setFaviconColor('#f5ff00').setFaviconBackgroundColor('red');faviconClear清除数字显示原来的icon
iNotify.faviconClear()chrome通知notify弹出chrome通知,不传参数为预设值...
iNotify.notify(); iNotify.notify({ title: '新通知', body: '打雷啦,下雨啦...', openurl: 'https://www.bing.com', onclick: function() { console.log('on click') }, onshow: function() { console.log('on show') },});title一定会被显示的通知标题。
dir文字的方向;它的值可以是auto(自动),ltr(从左到右),orrtl(从右到左)。
icon一个图片的URL,将被用于显示通知的图标。
body通知中额外显示的字符串。
openurl点击打开指定URL。
onclick每当用户点击通知时被触发。
onshow当通知显示的时候被触发。
onerror每当通知遇到错误时被触发。
onclose当用户关闭通知时被触发。
其它iNotify.init().title; 获取标题
例子实例一function iconNotify(num){ if(!notify) { var notify = new Notify({ 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 Notify({ effect: 'flash', interval: 500,});notify.setFavicon('1');实例三var iN = new Notify({ effect: 'flash', interval: 500, message: '有消息拉!', updateFavicon:{ // 可选,默认绿底白字 textColor: '#fff',// favicon 字体颜色 backgroundColor: '#2F9A00', // 背景颜色 }}).setFavicon(10);实例四var iN = new Notify().setFavicon(5);实例五var iN = new Notify({ effect: 'flash', interval: 500, message: "有消息拉!", audio:{ file: 'msg.mp4', }}).setFavicon(10).player();实例五var iN = new Notify({ 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 Notify({ effect: 'flash', interval: 500, message: '有消息拉!', audio:{ file: ['msg.mp4', 'msg.mp3', 'msg.wav'] }, notification:{ title: '通知!', body:'您来了一条新消息' }})iN.setFavicon(10).player();var n = new Notify()n.init({ effect: 'flash', interval: 500, message: '有消息拉!', audio:{ file: ['openSub.mp4', 'openSub.mp3', 'openSub.wav'], }, notification:{ title:'通知!', icon: '', body:'您来了一个客户', }})n.setFavicon(10).player();
评论