JS 實現的瀏覽器系統通知 iNotify.js

時間 2019-11-11

標籤實現瀏覽器系統通知 inotify.js inotify 欄目 JavaScript 简体版

原文原文鏈接

注：本分非原創；信息來源 oschinajavascript

受權協議:MITjava

開發語言:JavaScriptgit

操做系統:跨平臺github

軟件做者:同一種調調chrome

iNotify.js 詳細介紹npm

JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。數組

下載

  1 $ npm install title-notify --save-dev
  2 $ bower install inotify --save-dev

編譯

  1 # 下載依賴工具
  2 $ npm install
  3 # 壓縮inotify
  4 $ npm build

init

effect: flash | scroll | favicon瀏覽器

  1 var iNotify = new iNotify().init()
  2 //推薦下面寫法
  3 var iNotify = new iNotify({
  4     message: '有消息了。',//標題
  5     effect: 'flash', // flash | scroll 閃爍仍是滾動
  6     openurl:"http://www.bing.com", // 點擊彈窗打開鏈接地址
  7     onclick:function(){ //點擊彈出的窗之行事件
  8        console.log("---")
  9     },
 10     //可選播放聲音
 11     audio:{
 12         //能夠使用數組傳多種格式的聲音文件
 13         file: ['msg.mp4','msg.mp3','msg.wav']
 14         //下面也是能夠的哦
 15         //file: 'msg.mp4'
 16     },
 17     //標題閃爍，或者滾動速度
 18     interval: 1000,
 19     //可選，默認綠底白字的  Favicon
 20     updateFavicon:{
 21         // favicon 字體顏色
 22         textColor: "#fff",
 23         //背景顏色，設置背景顏色透明，將值設置爲&ldquo;transparent&rdquo;
 24         backgroundColor: "#2F9A00"
 25     },
 26     //可選chrome瀏覽器通知，默認不填寫就是下面的內容
 27     notification:{
 28         title:"通知！",//設置標題
 29         icon:"",//設置圖標 icon 默認爲 Favicon
 30         body:'您來了一條新消息'//設置消息內容
 31     }
 32 })

isPermission

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

  1 iNotify.isPermission()

聲音設置

player

播放聲音oop

  1 iNotify.player()

loopPlay

自動播放聲音

  1 iNotify.loopPlay()

stopPlay

中止播放聲音

  1 iNotify.stopPlay()

setURL

設置播放聲音URL

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

title通知

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

setTitle

設置標題，

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

setInterval

設置時間間隔

  1 iNotify.setInterval(2000)

addTimer

添加計數器

  1 iNotify.addTimer()

clearTimer

清除計數器

  1 
  2 iNotify.clearTimer()
  3

favicon通知

setFavicon

設置icon 顯示數字

  1 
  2 iNotify.setFavicon(10)
  3

faviconClear

  1 清除數字顯示原來的icon
  2 iNotify.faviconClear()
  3

chrome通知

notify

  1 彈出chrome通知，不傳參數爲預設值...
  2 iNotify.notify();
  3 iNotify.notify({
  4     title:"新通知",
  5     body:"打雷啦，下雨啦...",
  6     openurl:"http://www.bing.com",
  7     onclick:function(){
  8        console.log("---")
  9     }
 10 });
 11

其它

  1 iNotify.init().title; 獲取標題

例子

  1 new iNotify({
  2     effect: 'flash',
  3     interval: 500
  4 })
  5 
  6 上面的例子跟下面的是同樣的
  7 new iNotify().init({
  8     effect: 'flash',
  9     interval: 500
 10 });
 11

實例一

  1 function iconNotify(num){
  2     if(!notify) {
  3         var notify = new iNotify().init({
  4             effect: 'flash',
  5             interval: 500
  6         });
  7     }
  8     if(num===0){
  9         notify.faviconClear()
 10         notify.setTitle();
 11     }else if(num<100){
 12         notify.setFavicon(num)
 13         notify.setTitle("有新消息！");
 14     }else if(num>99){
 15         notify.setFavicon('..')
 16         notify.setTitle("有新消息！");
 17     }
 18 }

實例二

  1 var notify = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500
  4 });
  5 notify.setFavicon("1")

實例三

  1 var iN = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     updateFavicon:{//可選，默認綠底白字
  6         textColor: "#fff",// favicon 字體顏色
  7         backgroundColor: "#2F9A00" //背景顏色
  8     }
  9 }).setFavicon(10);

實例四

  1 var iN = new iNotify().init().setFavicon(5);

實例五

  1 var iN = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     audio:{
  6         file: 'msg.mp4'
  7     }
  8 }).setFavicon(10).player();

實例五

  1 var iN = new iNotify().init({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     audio:{
  6         file: 'msg.mp4'//能夠使用數組傳多種格式的聲音文件
  7     },
  8     notification:{
  9         title:"通知！",
 10         icon:"",
 11         body:'您來了一條新消息'
 12     }
 13 }).setFavicon(10).player();
 14 
 15 //彈出chrome通知，不傳參數爲預設值...
 16 iN.notify();
 17 
 18 iN.notify({
 19     title:"新通知",
 20     body:"打雷啦，下雨啦..."
 21 });

實例六

  1 var iN =  new iNotify({
  2     effect: 'flash',
  3     interval: 500,
  4     message:"有消息拉！",
  5     audio:{
  6         file: ['msg.mp4','msg.mp3','msg.wav']
  7     },
  8     notification:{
  9         title:"通知！",
 10         body:'您來了一條新消息'
 11     }
 12 })
 13 
 14 
 15 iN.setFavicon(10).player();
 16 
 17 var n = new iNotify()
 18 n.init({
 19     effect: 'flash',
 20     interval: 500,
 21     message:"有消息拉！",
 22     audio:{
 23         file: ['openSub.mp4','openSub.mp3','openSub.wav']
 24     },
 25     notification:{
 26         title:"通知！",
 27         icon:"",
 28         body:'您來了一個客戶'
 29     }
 30 })
 31 
 32 n.setFavicon(10).player();