iNotify.js JS 实现的浏览器系统通知开源项目

我要开发同款
小弟调调2017年08月21日
156阅读
开发技术JavaScript
所属分类常用JavaScript包、Web应用开发、提醒 (Notification)
授权协议MIT

作品详情

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');option

message: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();
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论