低版本浏览器提示升级方案

原创

用户4619307

发布于 2023-08-18 19:17:42

3140

发布于 2023-08-18 19:17:42

文章被收录于专栏：TangPieceTangPiece

方案

利用Browserslist可以动态获取满足条件的浏览器的特性，在每次编译时生成满足条件的浏览器范围，结合webpack插件obsolete-webpack-plugin，生成一个browser-update-tip.js文件，并在html中引入browser-update-tip.js

配置条件

根据公司的数据统计，结合浏览器覆盖率查询工具，设置配置条件如下

browsers: [
    'Chrome >= 70',
    'Firefox >= 90',
    'Safari >= 11',
    'Edge >= 44',
    'ie > 11',
    'last 4 years',
    'last 2 versions',
    'not dead'
  ]

该配置条件下的浏览器覆盖率：全球-95.8 %，中国-86.9 %

obsolete-webpack-plugin的配置为：

const obsoleteConfig = {
  name: 'browser-update-tip',
  template: `
    <div style="background: #ffffe5;text-align: center;line-height: 25px;color: #e75c00;border-bottom: 1px solid #d2d2d2;">你好，你当前的浏览器版本过低，可能会影响你的求职体验，建议你使用新版本360、Edge、chrome等浏览器。</div>
  `,
  promptOnNonTargetBrowser: true, // 不在范围内的浏览器就提示
  browsers: [
    'Chrome >= 70',
    'Firefox >= 90',
    'Safari >= 11',
    'Edge >= 44',
    'ie > 11',
    'last 4 years',
    'last 2 versions',
    'not dead'
  ]
}