WebView开发React.js遇到的问题和解决方案

Posted 2021-05-01 BossFeng

    最近很长一段时间都在做农行掌银“附近”，WebView非Native，目的是和掌银客户端开发解耦合。开发框架使用的是react.js。

    本文就列举一下遇到过的问题以及解决方案：

1. 部分android手机，“附近”服务端更新后，客户端不清理数据一直无法访问到最新版
   

2. 掌银“附近”图片加载慢

3. 防止重复点击

4. 关联系统变更并未通知我们，导致定位信息取不到
   

5. 测试环境和生产环境不一致，程序验证比较困难，比如Webpack自动打包

   
   

下面就一个一个问题分析解决

1.部分Android手机，“附近”服务端更新后，客户端不清理数据就一直无法访问到最新版

最开始开发考虑到客户端缓存的问题，在webpack的时候打包生成的app.js,css, img等都对文件名加上了hash值，比如app.hash.js。可在线上运行一段时间后发现部分Android仍然无法访问最新版。

通过组内技术大牛和掌银同事一起分析发现首页文件名固定是index.html

，同时在服务端的nginx.conf 中include nginx.other.conf，在nginx.other.conf中配置location *.html expired -1，也就是不缓存html页面。可就是因为没有在主nginx.conf配置html不缓存导致的问题。

解决方法：首先是js,css等文件名加上hash值，同时在nginx主配置文件nginx.conf中配合html不缓存。

2.掌银“附近”图片加载慢

问题分析：客户端没有缓存图片，同时服务器端图片未缓存。

参考 

服务器端现有图片访问方式：

F5->tomcat->service->image server

增加图片缓存服务器，如果缓存命中则不再继续访问tomcat：

F5->nginx（图片缓存服务器）-->tomcat->service->image server

现状分析发现线上环境图片在2.5万个左右，但image server端的同事反馈我们日均访问量在200万次左右，即存在大量的重复访问。同时通过后端同事了解到所有的图片都是通过上传新的图片生成新的fileId来更新。这时使用nginx图片缓存的失效时间可以设置30d。具体请参考 nginx proxy_cache配置。

解决方法：

客户端通过cache-control和last-modified来控制。

服务器端通过nginx自带的proxy_cache来实现图片缓存。

3.防止重复点击

现象：

因为农行信用卡的秒杀活动异常火爆，在5.25的活动中很多用户找到工具直接发网络请求来秒杀。恩，据说，最近开发各种秒杀工具很火爆。

第一次活动难免遇到一些问题，比如同一个用户在100毫秒内点击了10次以上。

分析：首先是通过验证码防止机器人。但秒杀活动却增加验证码环节，用户体验不好。那么我们就需要提前识别机器人，然后对机器人增加验证码。

最简单的识别就是在活动未开始已经收到发包，必定是机器人。

其次，在活动中，如果出现，100ms内点击超过10次，那么也必定是机器人。

解决方法：

利用redis的incr的原子性和失效时间，每次领取都redis.incr(sessionId)同时设置失效时间500ms，如果incr返回值为1。那么就向后台发送抢券请求，否则提示用户操作太快。（特别说明，即使是多台tomcat，因为redis集群是同一个，所以不会出现数据一致性问题）

4.关联系统变更并未通知我们，导致定位信息取不到

问题分析，多个部门多个项目之间关联较多，投产前沟通不足。分析要做充分，投产前也要不断确认！！！

解决方法：

开发过程中要做到及时有效沟通，投产前列出任务一览表，严格确认各个关联系统。

5.测试环境和生产环境不一致，程序验证比较困难，比如Webpack自动打包

现象一次投产后，很多分行同事反馈部分低版本Android和ios，“附近”部分图片无法显示。

分析步骤，各种查看代码，对比代码版本差异，一无所获。重新打包对应版本代码在测试环境，依然无法复现问题。几乎都要放弃治疗。

最后找线上同事拿到线上版本的zip，发布在测试环境稳定复现问题。

然后确定是打包导致的问题，上产包是自动打包，虽然投产前使用投产版本的zip，在测试环境验证，但是没有覆盖所有机型。

解决方法：

投产前，务必对自动打包的jar, war,zip发布在测试环境做完整全面的回归测试。

特别说明以上解决方法都已经找到，目前基本都完成开发测试，但并未全部投产，尽请期待相关功能投产。

iOS专用赞赏通道