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

方案

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

配置条件

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

代码语言：javascript复制

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的配置为：

代码语言：javascript复制

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'
  ]
}

下载低版本浏览器

Windows版: https://softwaredownload.co.in/browsers/chrome?page=7

绿色版(无法调试)：https://vikyd.github.io/download-chromium-history-version/#/

webpack browser plugin 浏览器 浏览器兼容性

0 人点赞