如何告别502、友好的告知用户网站/app正在升级维护

封面只是想分享一张喜欢的图片,嘻嘻嘻

一个产品,用户除了会在意流程简不简单、好不好用、页面好不好看以外,各种小细节也很重要。

今天讲讲我接到的一个新需求------整改版本更新功能。

一、以前是这样的

1. 发版前:微信群通知用户

如果计划今晚发版,研发部就通知运营部,运营部再在群里通知各用户"我们将于YYYY年MM月DD日 hh:mm:ss发版,请大家......"

2. 发版时:接口502+页面无响应

在这之前,发版时用户仍停留在网站,但接口返回502,但502未告知给用户,所以用户不知道这时到底发生什么了,只知道页面没数据了、卡着动不了了、怎么刷新都没办法......

3. 发版后:app粗暴的强制更新

在这之前我们的项目还处于快速开发的过程,迭代间隔短频率高,有时我们会更新影响流程的重要功能,担心用户未及时更新,所以我们只提供了强制更新方案。

二、现在是这样的

这都什么时代了,还需要口口相传......

1. 发版前:升级预告

大家想想618、双十一、双十二,各大平台是不是很早就开始宣传"走过路过别错过,满三百减五十,快来加购吧~"

我们产品的用户群体有一线工人、办公室文员、喝茶的经理、车上的老总,提前告知用户,可以让经理及时换班、让工人规避做工单的风险等等。总之,有事早通知,准是没错的。

怎么通知呢?

  1. 在内部管理平台新增一条升级预告消息,可以包含版本号version、预告内容content、预告状态status(是否有效)、平台(区分网站和APP,因为可能不是同时都需要发版)

  2. 网站:

    1)用户登录或主动刷新页面时,页面顶部显示升级预告,实现逻辑和app一样

  3. APP:

    1)充分利用消息推送、短信推送,可以根据自身业务来定,看这次更新是否需要紧急通知用户,我们仅使用消息推送。平台新增一条升级预告后,就主动推送一条app消息给用户

    2)打开app后,弹框弹出升级提醒(包含"我知道了"和"不再提醒"按钮),在store记录预告消息的id。

  • 点击"不再提醒",则在store缓存中将isRemind置为false
  • 点击"我知道了",则下次打开首页还会显示弹框。
  • 每次打开首页时,从接口获取到数据,如果消息状态有效status: true,则判断消息id同缓存中消息id是否一致:一致则表示是同一条消息,则根据缓存中的isRemind来判断是否显示消息;不一致则表示是新消息,直接显示。

2. 发版时:

场景:我们产品是全量发布,发布完成后网页能正常访问,但这时产品会进行验收,还不希望用户进行访问。

页面:pc和app的升级中页面单独写在项目中,这样可以在页面中写监听:监听到版本正常后就返回首页。

方案:发版中和验收中,运维将别人的IP设置为不能访问,将公司特定IP设置为可访问。

网站:不能访问的,nginx就设置跳转到升级中页面;能访问的就不做处理,发版时页面会接口报502(只能内部人员能看见),发版后验收时页面正常使用。

APP:app中不好重定向,所以通过配置文件来告诉前端该用户是否应该访问页面。远程存在2个json配置文件,内容就是一个对象之类的{isEntry: 1}{isEntry: 0},分别表示可以访问和不可访问;app打开时,前端请求json,根据是否可以访问做处理,不能访问的,前端让重定向到升级中页面,能访问的不做处理。

3. 发版后:

内部管理平台:上传新的安装包、配置升级文案等

网站:所有人正常使用

APP:所有人正常使用,打开App如果版本较低则会主动打开"版本更新"弹框。

APP可以提升用户体验的地方:

  • 版本判断放在登录之前,先检查是否有更新,也就是这个接口不需要用户权限控制
  • 升级页面判断是否连接了wifi,连接wifi则更新不耗流量,没连接则显示此安装包只有多大
  • 提供"暂不更新"和"检查更新"的入口

总结

思考方案时,自己感觉做了一件大事;但多思考几次后,特别是写完文章后,又觉得新的升级方案其实很简单,上面说了一堆废话。

没关系,把每一件小事做好,就很好啦~~

相关推荐
CodeSheep2 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员7 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc15 分钟前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii6617 分钟前
120html
前端
.生产的驴18 分钟前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无25 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding31 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒35 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码1 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6