浏览器最小化 弹窗提示_浅谈浏览器通知 Notification

前言

前段时间接到一个需求，我们的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是兼容性比较