近期在做公司后臺(tái)管理系統(tǒng)，當(dāng)有任務(wù)到來(lái)時(shí)，須要通知當(dāng)事人，可是 當(dāng)事人有可能在做別的，瀏覽器有可能會(huì)被最小化，這樣就非常難看到通知了。經(jīng)過(guò)查找發(fā)現(xiàn)有些瀏覽器能夠使用noitfications。能夠在桌面的通知區(qū)域內(nèi)顯示一個(gè)提示框，而且顯示在桌面的最前面，非常方便就能看到了。我就將它簡(jiǎn)單的封裝一下，使其符合經(jīng)常使用的使用場(chǎng)景。
功能效果類似webQQ的消息提示通知。

項(xiàng)目地址：https://github.com/rentiansheng/notification

chrome
瀏覽器桌面通知

簡(jiǎn)單介紹

用于其余B/S下的網(wǎng)絡(luò)辦公提醒功能。
頁(yè)面最小化的狀態(tài)下發(fā)送通知
依舊顯示在屏幕的右下角，立即能夠看到內(nèi)容

依賴

PC chrome瀏覽器。
手機(jī)android 海豚瀏覽器

注意事項(xiàng)

通知權(quán)限是基于站點(diǎn)（或者域名），同一個(gè)站點(diǎn)以下的頁(yè)面僅僅須要獲取一次權(quán)限就可以。
假設(shè)別禁用了。將不會(huì)顯示通

設(shè)置-》隱私設(shè)選以下的 “內(nèi)容設(shè)置”-》通知

知的，也無(wú)法再次獲取權(quán)限了。
能夠同瀏覽器的菜單查看權(quán)限。

設(shè)置-》隱私設(shè)選以下的 “內(nèi)容設(shè)置”-》通知

假設(shè)你關(guān)閉或者刷新頁(yè)面了。之前的通知就沒(méi)法控制了 。

使用

引用notify.js文件

<script src="notifiy.js"></script>

瀏覽器配置

檢查瀏覽器是否支持桌面通知功能

Notifier.HasSupport();

獲取同意桌面通知權(quán)限

Notifier.RequestPermission();

設(shè)置通知顯示方式（可選。不設(shè)置採(cǎi)用默認(rèn)模式）

 Notifier.ModelAll();       //默認(rèn)方式，顯示全部的。在linux一般為三個(gè)。在window顯示在通知區(qū)域。
 Notifier.ModelUpdate();    //更新模式，顯示在上一個(gè)通知的位置，
 Notifier.ModelCount(c);    //限制當(dāng)前頁(yè)面顯示的通知個(gè)數(shù)，默覺(jué)得三個(gè)(能夠通過(guò)參數(shù)c改變個(gè)數(shù))。超出限制時(shí)關(guān)閉最早的通知，
 NOtifier.ModelTimeout(ct); //超時(shí)消失模式。顯示一定時(shí)間自己主動(dòng)消失。

發(fā)送通知

Notifier.Notify(icon, title, message); //顯示桌面通知，icon：圖片的地址  title:通知的標(biāo)題 message：通知的內(nèi)容

關(guān)閉的方法

 Notifier.Clse(type);    //type=1 關(guān)閉上一個(gè) 其它值 關(guān)閉最早打開(kāi)的
 Notifier.ClosePre();    //關(guān)閉近期個(gè)打開(kāi)的通知
 Notifier.CloseLast();   //關(guān)閉最早顯示的通知
 NOtifier.CloseAll();    //關(guān)閉全部通知

其它方法

Notifier.GetPermission();   //獲取關(guān)于通知使用權(quán)限，0，已經(jīng)得到權(quán)限 1，須要獲取權(quán)限 2，禁止使用
Notifier.IsGetPermission(); //是否已經(jīng)獲取通知的使用權(quán)限
Notifier.Disable();         //是否禁用通知

總結(jié)

以上是生活随笔為你收集整理的浏览器桌面通知（notifications）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。