前言
前段時間接到一個需求，我們的web系統有電話接聽功能。產品希望有電話呼入的時候，能夠有效提示用戶，無論用戶是否在當前的系統頁簽上，甚至瀏覽器被最小化以後也能提醒用戶。就着這個需求，我做了一些探索。
前端對用戶的通知一般侷限於頁面之內，比如alert，confirm。或者js控制一個彈窗提醒用戶。有些場景需要在頁面之外通知用戶，即當用戶頁籤不在本頁面，或者瀏覽器已經被收起來的情況。
本文介紹一些瀏覽器通知方式。
方法一：閃爍瀏覽器標題
利用document.title修改頁籤的標題，使用定時器來回切換內容實現標題閃爍，引起用戶注意。
例子：
function sendNotificationFn(message, time) {
var oldTitle = document.title; // 保存原有標題
var changeVal = 1;
var notice = setInterval(function() {
if (changeVal) {
document.title = message;
changeVal = 0
} else {
document.title = oldTitle;
changeVal = 1
}
}, time || 1000);
return notice;
}
sendNotificationFn('有新的通知', 500);
// 中止通知
clearInterval(notice);
使用上述方法就可以不斷閃爍title，引起用戶的注意。方法會返回定時器，清除定時器重新設置title就可以恢復正常。
效果如圖
修改title是兼容性比較好，實現比較簡單的一種方式，但是用最小化瀏覽器效果就很不好了，爲了解決這個問題。html5推出notification api
方法二：web notification
我們先來看一下效果
會在系統的右下方顯示一個通知，即便頁籤不在用戶的視窗內，也可以觸發該效果。
一個簡單的例子
function sendNotification() {
new Notification("通知標題：", {
body: '通知內容',
icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
})
}
if (window.Notification.permission == "granted") { // 判斷是否有權限
sendNotification();
} else if (window.Notification.permission != "denied") {
window.Notification.requestPermission(function (permission) { // 沒有權限發起請求
sendNotification();
});
}
如果沒有彈出彈窗，有兩種可能
-
瀏覽器不支持Notification API -
需要獲得通知授權。
是否支持Notification可以通過window.Notification是否存在來判斷，如果支持的情況下沒有彈出就需要獲得授權。通過調用Notification.requestPermission(callback)來獲取用戶授權，授權後可正常彈出。
也可以點擊圖中的小鎖圖標，允許通知。
不同瀏覽器的實現樣式略有不同，js代碼不能控制具體的位置和樣式，可以確定標題，內容，和一個系統icon。對於chrome瀏覽器，一般幾秒鐘後會被自動關閉，其他瀏覽的各個版本實現各有不同，如我用的360極速， 長時間也不會關閉, 可以看到已經顯示了12分鐘。
chrome瀏覽器效果實現
可以通過調用Notification.close()方法，主動關閉關閉通知。
new Notification(title, options) 通過new構造，調用通知方法。其中title是必填參數，表示通知的標題內容，options是可選參數，詳見下表：
| 屬性 | 含義 | 類型 |
|---|---|---|
| body | 內容主體 | 字符串 |
| icon | 通知圖標 | 字符串 |
| silent | 是否需要聲音 | 布爾值 |
| sound | 聲音地址，可以播放提示聲音 | 字符串 |
| data | 任意類型和通知相關聯的數據 | 對象 |
| vibrate | 震動模式 | 數組 |
| tag | 通知標識 | 字符串 |
| renotify | 通知是否使用疊加效果，默認true，fasle則爲替換 | 布爾值 |
| noscreen | 是否不在屏幕上顯示通知，用於移動端，默認false | 布爾值 |
通知堆疊效果 false僅顯示最新的一個
其中vibrate是個很有意思的屬性，在Notification使用vibrate屬性可以使設備震動，填入[300, 100, 300], 表示設備振動 300毫秒，然後停止100毫秒，再振動300毫秒
new Notification("通知標題：", {
body: '通知內容',
vibrate: [300, 100, 300],
icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
})
使用該效果雖然更能引起用戶的注意，但是也會有過分打擾用戶。有些瀏覽器也沒有實現該效果，慎重使用。
再來看看Notification的相關事件
| 事件名 | 含義 |
|---|---|
| Notification.onclick | 通知被點擊時 |
| Notification.onerror | 通知顯示異常時，躲在用戶沒有給通知時觸發 |
| Notification.onclose | 通知被關閉時 |
| Notification.onshow | 通知顯示時 |
Notification還提供了一些只讀屬性，可供一些特殊需求使用，大部分和options相同 列如：title，body，tag，icon，silent，timestamp（通知創建的時間），noscreen等
Notification的兼容性
在現代瀏覽器的支持還是比較好的，edge的高版本也做了支持，不過對於IE已經其他老版本的瀏覽器，還是需要考慮 兼容性和備用方案。
iNotify.js 方法庫介紹
上述兩種方法使用的時候免不了要自己封裝，尤其是Notification，api和屬性都比較多，推薦使用iNotify.js來解決通知問題 iNotify.js。可以幫助實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。
這個例子是進行聲音提示
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:'您來了一條新消息'//設置消息內容
}
})
import Notify from '@wcjiang/notify';
const notify = new Notify({
effect: 'flash',
interval: 500,
});
notify.setFavicon('1');
notify.setTitle('New title');
notify.setInterval(200);
notify.notify({ openurl: 'http://localhost:8084/#/admin/home' });
setTitle 用來設置標題
setInterval 用來配置閃動間隔
setFavicon 用來配置角標數字， 如下圖
notify.notify() 直接發起提示
具體使用可以參看 https://github.com/cywcd/iNotify， 非常詳細。
總結
H5的Notification爲瀏覽器通知提供了一個很好的解決方案，用戶體驗優秀，結合自定義聲音，能帶來不錯的體驗，但是目前的兼容性一般，即便是使用iNotify.js，所以在生產環境中使用需要注意使用場景。在移動端的實現會更不穩定一些，建議多多測試，做好保底方案。
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創文章
本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。