JS 完成浏览器的 title 闪灼、转动、声响提醒、chrome、Firefox、Safari等体系弹出关照。它没有依靠，紧缩只要只要4.66kb(gzipped: 1.70kb)，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 举行下载：

<script src="https://unpkg.com/@wcjiang/notify/dist/notify.min.js"></script>
<script type="text/javascript">
var notify = new Notify({
  effect: 'flash',
  interval: 500,
});
notify.setFavicon('1');
</script>

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: 'http://www.bing.com',
  onclick: function() {
    console.log('on click')
  },
  onshow: function() {
    console.log('on show')
  },
});

• title 肯定会被显现的关照题目。
• dir 笔墨的方向；它的值能够是 auto（自动）, ltr（从左到右）, or rtl（从右到左）。
• 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();

License

MIT © Kenny Wong