怎么打败微信内置浏览器的恐怖缓存

事情的起因

在上周五的一次发版,在我的想象中,应该又是一次平平无奇的发版,我很淡定的在微信聊天框里面点开了链接。

"哦hou,怎么还是上次的版本?运维还没有发版本了?"

"@运维,请问发版结束了吗?"

"已发版",运维很快会了三个字。

我就知道,又是微信浏览器缓存的问题。

解决方案

是的,很快,啪的一下,如果各位不想看分析过程,那么请看解决方案:

步骤1. 修改打包文件,打包后的 css、js 都加上唯一哈希值

这个就根据打包工具来设置就行了,打开 ai 工具,直接问:

"我是 webpack/vue cli/vite 等,怎么打包文件,打包后的 css、js 都加上唯一哈希值"

步骤2. 改 html 的响应头

给html加上响应头:Cache-Control: no-cache, no-store, must-revalidate

响应头说明:浏览器、CDN、代理服务器 都不要缓存这个资源,用户每次访问都去服务器拿最新的。

参考代码:

nginx 复制代码
location ~* \.(html)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

分析过程

事实上,我之前一直无视这个问题,因为 dev、uat 环境之前已经配了 Cache-Control: no-cache, no-store, must-revalidate,所以没发现。

而且好几次上线都能拿到最新的,没想到第三次的时候,突然来这样子搞,一时不察。

先定位原因,直接上抓包工具,这里我用的是 appStore 的 Stream,去下载,这个好用

为啥没有安卓的,因为安卓抓 https 的包,需要 root 权限,我实在没有安卓手机,也没法推荐了,抱歉

我一抓包,一看,完全没有 js、css 的请求,只有 html,我就知道了,微信缓存。

立刻找同事,让它清除缓存看看,成功!

好了,可以开始拉会议对接这个问题了,叭叭叭跟相关人员讲了一堆,运维说:"啊,没想到微信缓存那么久的?"

最后的一段文字

我从事前端开发的日子里,微信的缓存总是犹如梦魇一般,在每次的项目里都会出现。

"怎么打开异常了?有 bug" "怎么页面还是旧的啊" "打开后弹窗报错了"

"亲,这是微信缓存,你清一下",我哈哈哈的无语了。

而且吊诡的微信浏览器在早些年,就算你用了各种手段,它都是拉了旧的 html,还好新时代好了

现在的话,一般在 解决方案 这两板斧下去,都没问题的。

此致,古德拜

相关推荐
那年窗外下的雪.18 小时前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
IT_陈寒18 小时前
Python性能优化:5个被低估但效果惊人的内置函数实战解析
前端·人工智能·后端
00后程序员张18 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
前端架构师-老李18 小时前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据18 小时前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_18 小时前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron
luckyPian18 小时前
前端+AI:CSS3(二)
前端·css·css3
JiKun18 小时前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店19 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask