该项目是一个被很多业务方项目通过src引入的小机器人sdk项目,主要负责帮助业务方项目设置一些常用的问题给用户。
刚接手这个项目的时候,项目经历了一次代码合并,上线后,有用户反馈无法关闭问答弹框或者是弹框自动弹出就霸屏了也无法关闭。
解决问题的路程
用户通过清除缓存后再访问就没有上述的问题了。所以我们定位是浏览器缓存的问题,于是第一版就修改了缓存。定位到sdk项目里面nginx设置catch-control是max-age:30天,所以js和css都会被浏览器缓存下来30天。于是就max-age改成了1天,上线了。
结果第二天还是陆续有用户反馈相同的问题。于是被后端大佬质疑到底max-age会不会重新请求,所以问了下关于catch-control的事情,被大佬摁在地上摩擦了一下,自己去查了一波浏览器缓存,发现catch-control是强缓存。
emmmm...也就是说只要用户访问过本地就缓存下来了,不会去浏览器重新拉取新的资源。
到这里大家肯定想因为一般这种问题的处理办法是给js和css文件加hash值或者时间戳之类的类似引入时候要这种。(当然我们是通过webpack配置文件名实现的,不是引入的地方加时间戳。)
<script type="text/javascript" charset="utf-8" defer src="http://robot_sdk.XXX.com/main.[hash].js"></script>
复制代码
但是这种要人家第三方改啊,人家肯定不乐意,于是就想怎么能让第三方和用户都无感知就把这个问题解决掉。
先说结果,结果就是不管怎么样都不行都不能填上这个坑,就是一部分的用户会出现这个问题。
连线了一个现场能复现的老师,在她那里看了两遍发现,霸屏无法关闭的结果是因为他本地的js的max-age更新成1天了,但是css还是没有更新catch-control是max-age:还是30天。所以霸屏是因为没有加载到样式,无法关闭也是没有样式啊,所以就没有显示隐藏的切换。
被后端同学反复的问,为啥js更新css的没有更新。我都要无奈了。
自己也有疑问,只能勉强先说是浏览器机制还有用户浏览器设置的锅。
然后我咨询了大佬,大佬说把catch-control改成no-store就可以了,带着大大的疑惑又上线了,心里都知道不一定生效,因为浏览器如果已经在30天内根本不请求啊,no-store就不会生效。但是改成no-store之后只要用户清缓存一次,就永远不会有问题了。
负责人给的建议说把dom切换的行为直接拿到js里面,因为人家js可以更新的嘛。感觉可行。就改了通上线了。静静等待1天之后再问下。或者等看还有没有用户反馈。
总结下:强缓存,比如max-age在时间范围内就算是本地刷新也不会重新请求,除非清除缓存,对于js和css表现不一致可能是浏览器处理机制不同。so,强缓存要慎用。
未完全解决方案
目前解决方案提供几种,
我们增加了新的引入路径,业务方改下路径前端重新上线。因为强制缓存是对比url地址的 地址不一样就不会走缓存。
一个是让接入小机器人的业务方在欢迎语加上提示类似,无法关闭手动清除浏览器缓存。
业务方不做变动,有同学反馈告知清缓存。
等待我们的解决方案,因为都是js刷新,css不刷新惹的祸。如果js刷新成1天之后用户重新打开页面重新请求了,就会更新到我们重新改的版本中。