利用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'
]
}
Windows版: https://softwaredownload.co.in/browsers/chrome?page=7
绿色版(无法调试):https://vikyd.github.io/download-chromium-history-version/#/
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。