程序员

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

2019-04-11  本文已影响0人  小宝宝_ef99

知识点
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()  // 关闭提醒框
    })
  }
上一篇下一篇

猜你喜欢

热点阅读