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

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

目录

• init
• isPermission
• 声音设置
• loopPlay
• stopPlay
• setURL
• title通知
• setTitle
• setInterval
• addTimer
• clearTimer
• favicon通知
• setFavicon
• faviconClear
• chrome通知
• notify
• 其它
• 例子
• 实例一
• 实例二
• 实例三
• 实例四
• 实例五
• 实例五
• 实例六

 

正文

注：本分非原创；信息来源 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("1")

回到顶部

实例三

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                                                                                                                                                                                                  下载