监听浏览器页面关闭事件(visibilitychange和unload)

需求场景：在微信打开邀请链接，进入项目，但不小心点击了左上角的关闭（x）按钮，导致再次点击链接进入时，登录提示“已经在项目中，请勿登录！！！”但是想要能够重新登录进去

调研解决方案如下：

一、监听visibilitychange事件
经过验证，发现在如下情况会触发：

• 点击微信浏览器的关闭按钮（x）
• 切换app应用
• 切换浏览器的tab页（比如safari，google等浏览器）

document.addEventListener("visibilitychange", this.closeBrowser)
closeBrowser(){
    if (document.hidden) {
        let token = getToken()
        let i = localStorage.getItem("inviteCode")
        let c = localStorage.getItem("customerType")
        let blob = new Blob(
          [
          `token=${token}`,
          `&entNum=2020040801`,
          `&videoNum=${this.meetingPeopleList[0].userId}`,
          `&uuid=${i}_${c}`],
          { type: "application/x-www-form-urlencoded" } );
          let result = navigator.sendBeacon(
          	window.cpic_config.sdkPreUrl+'/standard/client/unusual/logout',
          blob
          );
          if (result) {
          console.log("请求成功排队 等待执行");
          } else {
          console.log("失败");
          } 
     }
    }

未采用此方法的原因
当切换app应用或者浏览器的tab页时，再回到当前页面，应该是可以继续进行录制的，但是触发了visibilitychange，调用了退出接口，导致后续的接口调用都提示“token过期了”，于是产生了下面第二种方法

二、监听unload事件
经过验证，发现在如下情况会触发：

• 点击微信浏览器的关闭按钮(x)
  具体方法如下：

window.addEventListener("unload", this.closeBrowser)
closeBrowser(){
  let token = getToken()
  let i = localStorage.getItem("inviteCode")
  let c = localStorage.getItem("customerType")
  let blob = new Blob(
    [
    `token=${token}`,
    `&entNum=2020040801`,
    `&videoNum=${this.meetingPeopleList[0].userId}`,
    `&uuid=${i}_${c}`],
    { type: "application/x-www-form-urlencoded" } );
    let result = navigator.sendBeacon(
    	window.cpic_config.sdkPreUrl+'/standard/client/unusual/logout',
    blob
    );
    if (result) {
    console.log("请求成功排队 等待执行");
    } else {
    console.log("失败");
    } 
}

采用此方法的原因：
关闭微信浏览器可以正常退出，且切换app再回来不影响
在手机浏览器打开，切换app或者tab页再回来也不影响继续录制

visibilitychange和unload两种方法的区别:

1. 作用对象不同：
   visibilitychange作用在document上
   unload作用在window上
2. 触发时机不同：
   当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange(能见度更改)事件
   当文档或一个子资源正在被卸载时，触发 unload事件。
   注意事项：
   当添加了addEventListener事件监听器后，如果想通过removeEventListener移除所监听的事件，事件处理函数不能使用匿名函数，需要使用和addEventListener的事件处理函数同名的函数
   即：
   window.addEventListener(“unload”, A)
   window.removeEventListener(“unload”,A)
   sendBeacon
   sendBeacon发出的是异步请求，但是请求是作为浏览器任务执行的，与当前页面时脱钩的