前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >低版本浏览器提示升级方案

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

原创
作者头像
用户4619307
发布2023-08-18 19:17:42
4450
发布2023-08-18 19:17:42
举报
文章被收录于专栏:TangPiece

方案

利用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/#/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方案
    • 配置条件
    • 下载低版本浏览器
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档