Safari浏览器兼容性问题处理

前言

作为一名菜鸡前端，我经常被safari的浏览器兼容性折磨，所以在此做一个曾解决过的兼容性问题总结，给日后不了解如何处理兼容性问题的前端同学提供一个思路。

低版本IOS Safari浏览器不兼容ES6语法

这是我首次跟safari浏览器打交道，在跟别的公司对接H5页面的时候发现的问题，他们的app最低可支持ios10的系统安装，他们的测试在用ios11.2的系统打开我们的H5页面时便出现了白屏，身边的同事也都没有用低版本的ios的，同时我也不知道页面报的是什么错误，此时一度陷入困境，在不清楚问题的情况下去解决报错，贸然更改代码与配置太过冒险，公司的电脑用的是Windows系统，安装虚拟机来还原低版本的ios环境或许是解决这个问题的方法。

先去黑苹果社区去下载一个macOs的镜像，这里我选择的版本是macOs11.1，虚拟机安装mac系统详情可见该篇文章VMWare15 安装 Mac OS系统(图文教程)
安装mac系统是为了使用Xcode，Xcode可以模拟ios的环境。mac环境都准备完毕后，进入Xcode设置里面的Preferences，选择Components，下载需要的ios版本。

运行对应的ios版本即可实现在Windows上打开ios设备（模拟），解决了没有低版本ios真机的痛点。

打开模拟器后发现低版本的ios系统的safari确实打不开H5页面，在项目的入口index.html文件中加入如下代码

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

引入一个小插件，可以实现在移动端设备上打开控制台。

打开控制台后问题终于水落石出，Unexpected token ‘…’. Expected a property name，ES6拓展语法导致的代码报错。

在项目中的.babelrc文件中加入如下配置

"presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns":"usage",
        "corejs":{
          "version":"3",
          "proposal":true
        },
        "targets":{
          "chrome":"60",
          "safari":"10"
        }
      }
    
    ],
    "@babel/preset-react"
  ],
"plugins": [
    "@babel/plugin-transform-runtime",
  ]

配置更改后重新编译发布，低版本ios设备可正常访问

至此，首个safari浏览器兼容性问题得以解决，整个过程的关键在于如何复现问题，发现报错。如果有低版本ios设备的同学可以绕过安装虚拟机macOs系统去使用Xcode模拟器，直接引入查看控制台的插件，即可看到报错。

Safari浏览器不支持YY-MM-DD hh:mm:ss时间格式

项目中做了一次时间格式调整，所有的时间需要带时分秒，调整完以后用户发现某款产品无法计算年龄，调整了项目中的代码，计算年龄的时候使用YY-MM-DD的格式，从而解决了这个问题。

Safari浏览器不支持正则的零宽断言

在项目中为了替换#{}的内容，使用了零宽断言，导致safari浏览器又双报错了，故换了一种正则匹配方式，下面是我变更后的代码，有兴趣的同学可以参考一下（我的正则写的烂，可以酌情吐槽一下）。

// 根据环境变量替换链接中的url
function transformUrl(url){
  /**正则表达式 */
  // const re = new RegExp('(?<=\#\{).*?(?=\})', 'g'); //匹配#{}里面的内容 零宽断言写法
  const re = new RegExp('\#\{(.*?)\}', 'g'); //匹配#{}里面的内容
  const tUrl = _.map([...new Set(url.match(re))], item => { // 去重
    return item.slice(2,-1) // 去除#{}
  })
  let nUrl = _.cloneDeep(url);
  _.forEach(tUrl, item => {
    if(window?.env?.[item]){
      // const reg = new RegExp(`(?<=\#\{)\(${item}\)\*\?(?=\})`, 'g'); //匹配#{}里面的内容 零宽断言写法
      // const exReg = new RegExp(`\#\{\(${window.env[item]}\)\*\?\}`, 'g'); // 匹配#{}，目的去除#{} 零宽断言写法
      const reg = new RegExp(`\#\{(${item})\}`, 'g'); //匹配#{}里面的内容
      const exReg = new RegExp(`\#\{\(${window.env[item]}\)\*\?\}`, 'g'); // 匹配#{}，目的去除#{}
      const replaceUrl = _.replace(nUrl, reg, window.env[item]);
      const newRepUrl = _.replace(replaceUrl, exReg, window.env[item]);
      nUrl = newRepUrl;
    }
  })
  return nUrl;
}

小结

兼容性问题不同于开发过程中遇到的bug，需要慢慢发现并消化，多方面的去思考解决方案，可以从配置或代码层面入手；作为一个前端开发，平时也不应当只以谷歌浏览器作为开发视角，也可以多关注一下其他的浏览器。最后推荐一个网站Can i use，用于查看各个浏览器的兼容性，祝各位前端同学都能妥善处理各种兼容性问题。