浏览器最小化时提醒通知(notification)

知识点
1、首先通过document.visibilityState判断是否处于最小化状态,
通过document.visibilityState是否等于hidden判断
2、处于最小化的话弹出消息提醒框

注意:谷歌浏览器仅支持https下的消息提醒

代码实现

popNotice(number, areaInfo, name?) {
    // 判断是否处于最小化状态
    if (document.visibilityState === 'hidden') {
      if (window.Notification) {  // 判断是否支持提醒
        //判断是否允许提醒
        if (Notification.permission === 'granted') {  // 允许的话弹出提醒
          this.pop(number, areaInfo, name)
        } else if (Notification.permission !== 'denied') {  // 不允许的话重新询问浏览器是否可以接收提醒
          Notification.requestPermission(function (permission) {
            this.pop(number, areaInfo, name)
          })
        }
      } else {
        alert('你的浏览器不支持此消息提示功能,请使用chrome内核的浏览器!')
      }
    }
  }
  
  // 弹出提醒框
  pop(number, areaInfo, name?) {
    const notification = new Notification('新来电:', {
      body: `${name ? name : '未知客户'},${number}(${areaInfo.province}/${areaInfo.city}),请注意接听!`,
      icon: '../../../assets/images/call_remind.png'
    })
    notification.onclick = (() => {
      // 点击后进行的操作
      notification.close()  // 关闭提醒框
    })
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容