摘要：實現瀏覽器的閃爍滾動聲音提示等系統彈出通知。它沒有依賴，壓縮只有只有，實例預覽。下載使用有消息了。文字的方向它的值可以是自動從左到右從右到左。一個圖片的，將被用于顯示通知的圖標。當用戶關閉通知時被觸發。

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 進行下載：

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: 設置消息內容

判斷瀏覽器彈框通知是否被阻止。

iNotify.isPermission()

播放聲音

iNotify.player()

自動播放聲音

iNotify.loopPlay()

停止播放聲音

iNotify.stopPlay()

設置播放聲音URL

iNotify.setURL("msg.mp3") // 設置一個
iNotify.setURL(["msg.mp3","msg.ogg","msg.mp4"]) // 設置多個

最新的版本默認不播放標題閃爍動畫，初始化之后需要調用 setTitle(true) 方法才播放標題動畫。

設置標題，

iNotify.setTitle(true) // 播放動畫
iNotify.setTitle("新標題") // 閃爍新標題
iNotify.setTitle() // 清除閃爍 顯示原來的標題

設置時間間隔

iNotify.setInterval(2000)

添加計數器

iNotify.addTimer()

清除計數器

iNotify.clearTimer()

設置 icon 顯示數字或者文本

iNotify.setFavicon(10)

設置 icon 顯示文本顏色

iNotify.setFaviconColor("#0043ff")

設置 icon 顯示文本顏色

iNotify.setFaviconBackgroundColor("#0043ff")
// 設置字體和背景顏色
iNotify.setFaviconColor("#f5ff00").setFaviconBackgroundColor("red");

清除數字顯示原來的icon

iNotify.faviconClear()

彈出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"http://可以使用數組傳多種格式的聲音文件
  },
  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();

MIT ? Kenny Wong