浏览器兼容性检测,获取iOS版本,chrome版本,引导用户升级的提示,参考示例,最佳实践

浏览器兼容性检测 Demo 代码的功能点：

  • 获取浏览器名称，检测是不是chrome浏览器
  • 获取操作系统OS名称、版本号，对不兼容的iOS系统做提示
  • iOS仅兼容 Safari 浏览器，不是 iOS 官方浏览器，做提示，引导用户使用推荐的浏览器
  • chrome 版本低于 V101，做提示浏览器版本太低，引导用户升级 v101
  • 单独对华为设备、系统做浏览器判断，建议使用华为官方的华为浏览器 (参考原因)

因为我的业务系统可以邀请用户使用指定环境、浏览器，所以我的浏览器要求是比较高的，您可以参考代码，再针对自己的情况做修改。

以下代码使用的开源库 "ua-parser-js": "1.0.37" (参考 demo 实现快速获取浏览器、系统名称+版本号等)

checkBrowser() {
      const UAParser = require('ua-parser-js');
      let result = UAParser();
      console.log(result);
      // https://github.com/faisalman/ua-parser-js/tree/1.0.35#documentation
      /*
        {
          "ua": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
          "browser": {
            "name": "Chrome",
            "version": "122.0.0.0",
            "major": "122"
          },
          "engine": {
            "name": "Blink",
            "version": "122.0.0.0"
          },
          "os": {
            "name": "Windows",
            "version": "10"
          },
          "device": {},
          "cpu": {
            "architecture": "amd64"
          }
        }
      */
      let osName = result.os.name;
      //  根据系统做判断
      if (osName === 'iOS') return this.checkIOS(result);
      if (osName === 'Mac OS') return this.checkMac(result);
      // 华为手机
      if (result.ua.toLowerCase().indexOf('huawei') > -1 && osName !== 'Windows') return this.checkHuaWei(result);
      if (osName.startsWith('Android')) return this.checkAndroid(result);
      if (osName === 'Windows') return this.checkWindows(result);
      /* 浏览器兼容性判断-总体逻辑
       */

      //  其他情况
      let isGoodBrowser = result.browser.name === 'Chrome' && getMainVersion(result.browser.version) >= 101;
      if (!isGoodBrowser) {
        this.$alert('您的浏览器可能不兼容本系统，建议您使用 Chrome V101 以上版本访问，以免出现问题。');
        return false;
      }
      return true;
    },
    checkIOS(result) {
      if (getMainVersion(result.os.version) < 15) {
        this.$alert('您的 iOS 版本太低，推荐使用 iOS 15.0 以上的 Safari 浏览器访问此系统，以免出现问题。');
        return false;
      } else if (result.browser.name !== 'Mobile Safari') {
        this.$alert('您的浏览器可能不兼容本系统，建议您使用 Safari 访问，以免出现问题。');
        return false;
      }
      return true;
    },
    checkMac(result) {
      if (result.browser.name === 'Chrome') {
        if (getMainVersion(result.browser.version) < 101) {
          this.$alert('您的浏览器可能不兼容本系统，建议您使用 Chrome V101 以上版本访问，以免出现问题。');
          return false;
        }
      } else {
        this.$alert('您的浏览器可能不兼容本系统，建议您使用 Chrome V101 以上版本访问，以免出现问题。');
        return false;
      }
      return true;
    },
    checkHuaWei(result) {
      let isGoodBrowser = result.browser.name === 'Huawei Browser' && getMainVersion(result.browser.version) >= 14;
      if (isGoodBrowser) return true;
      this.$alert('您的浏览器可能不兼容本系统，建议您使用华为浏览器 V14.0 以上版本访问，以免出现问题。');
      return false;
    },
    checkAndroid(result) {
      if (result.browser.name === 'Chrome') {
        if (getMainVersion(result.browser.version) < 101) {
          this.$alert('您的浏览器版本太低，建议您使用 Chrome V101 以上版本访问，以免出现问题。');
        }
        return false;
      } else {
        this.$alert('您的浏览器可能不兼容本系统，建议您使用 Chrome V101 以上版本访问，以免出现问题。');
      }
      return true;
    },
    checkWindows(result) {
      return this.checkMac(result);
    }

以上的浏览器兼容性检测，我是写在 Vue 工程的 App.vue methods 里面的，因为全局都需要用，以后还需要 i18n 多语言、国际化，所以，直接放进 App.vue 里面了。

子、孙组件怎么快速调用 App.vue 根组件的 methods 方法呢？

子组件调用示例，比如 login.vue 路由中，登录之前告知用户浏览器的兼容性，给用户引导升级，就执行代码：this.$root.$children[0].checkBrowser()

setTimeout(() => {
    let checkBrowser = this.$root.$children[0].checkBrowser();
    console.log('checkBrowser', checkBrowser);
});

一些全局的弹窗对话框，这样实现，全局唯一，又能方便的调用，我觉得还是不错的。

华为使用 chrome 的webrtc bug:

WebRTC开发的时候，还遇到过问题：chrome 无法解码H264视频，H264编码的画面变成了黑屏画面。这时候的兼容性判断就需要做的更复杂，后来发现切换到华为浏览器v14才解决画面黑屏的bug。