美文网首页程序员
浏览器最小化时提醒通知(notification)

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

作者: 小宝宝_ef99 | 来源:发表于2019-04-11 17:30 被阅读0次

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

    相关文章

      网友评论

        本文标题:浏览器最小化时提醒通知(notification)

        本文链接:https://www.haomeiwen.com/subject/ojrxwqtx.html