企微实战开发之记忆功能 - Cache-Control

目录1. 概要2. 整体流程3. 技术名词解释3.1 缓存策略名词3.2 缓存机制与现象名词3.3 Nginx配置相关名词3.4 企业微信/客户端名词4. 技术细节4.1. no-cache重校验不执行4.2 reopen 旧 /reload 新情况的机制5、小结1. 概要项目更新包之后手机端和浏览器重新校验拿到新包实锤PC端企业微信一直缓存旧包。2. 整体流程第一步没有缓存头策略的 index.html 依赖 各端启发式缓存max-agePC端企微内置浏览器出现缓存顽固情况。第二步使用协商缓存的缓存控制响应头。reopen时依然吃旧缓存reload才强制走网络。第三步升级为禁止缓存类型。手动清除缓存重新发起网络请求获取新包成功。注意1no-cache 和 no-store 只防服务器最新资源首先需要手动删除之前没添加缓存策略的本地缓存副本。注意2使用no-cache时保留server继承使用expires -1。不要在location中嵌套add_header避免丢失安全头。3. 技术名词解释3.1 缓存策略名词Cache-ControlHTTP协议控制缓存的响应头指定当前请求/响应的缓存机制no-cache协商缓存指令。可以缓存但缓存前需要向服务器验证文件是否改变。no-store绝对禁止缓存指令。max-age强缓存指令。304 Not ModifiedHTTP 状态码。3.2 缓存机制与现象名词强缓存Strong Cache浏览器直接从本地读取缓存完全不向服务器发起网络请求协商缓存Negotiation Cache浏览器向服务器发请求验证服务器判断后返回304用本地磁盘中的缓存内容或 200用新文件启发式缓存Heuristic Caching当服务器未明确给出缓存指令时浏览器会根据文件最后修改时间推算出的一个缓存策略(当前时间 - 文件最后修改时间) × 10%—— PC缓存坑的可能原因Content-Hash内容哈希前端打包工具Webpack/Vite在文件名中加入的字符串如app.090f4d18.js。文件内容变哈希值就变它配合入口文件的不缓存策略可以放心地对静态资源使用强缓存实现极速更新BFCacheBack-Forwark Cache / 往返缓存内存级缓存优化技术。页面离开时浏览器将整个页面完整快照冻结保存在内存中。用户URL前进/后退时浏览器直接从内存中恢复快照不需要重新向网络发请求。快照内容DOM、JavaScript堆、滚动位置等。3.3 Nginx配置相关名词map指令Nginx的变量映射工具。把不同的URL路径$uri映射成不同的缓存策略变量$uriNginx内置变量。表示用户请求的路径/,/js/app.xxxx.js等add_headerNginx指令。向 HTTP 响应中添加自定义头部expiresNginx指令。用于快速设置过期时间expires 30d 或 expires -1底层会自动转换为 Control-Cache 头try_filesNginx指令。常用于SPA单页应用按顺序检查文件是否存在如果都不存在就回退到/index.html解决前端路由刷新 404 的问题3.4 企业微信/客户端名词WebView容器客户端企微/微信内嵌的浏览器容器用于加载URL实现App内部渲染和展示H5页面。针对不同操作系统企业微信底层的实现机制存在差异Mac端MacOS:WebView容器WKWebView苹果官方提供的现代网页渲染组件。渲染内核WebKit苹果系统自带的系统级共享内核基于WebKit2多进程架构设计。reopen重开机制应用生命周期重置。当企业微信在后台长时间不活跃可能会被 macOS 挂起甚至释放内存。重新点击企微时若进程被回收则会触发冷启动并重建 WebView 容器重新向服务器发起网络请求。MacOS电脑CPU指令集 M系列Apple SiliconARM架构 Intel Macx86架构。iOS端iPhone/iPad WebView容器WKWebView苹果官方提供的现代网页渲染组件。渲染内核WebKit苹果系统自带的系统级共享内核基于WebKit2多进程架构设计。reopen重开机制进程挂起与恢复。当企业微信在后台长时间不活跃被系统“杀掉”。用户再次点击企微图标时APP会Cold StartWebView容器被销毁并重新创建必然会重新向服务器发起网络请求。Windows端PCWebView容器CEFChromium Embedded Framework基于Chromium开源项目的桌面端内嵌浏览器框架。渲染内核Chromium(Blink)Chromium浏览器框架底层搭载的Blink渲染引擎。reopen重开机制窗口销毁与重建 / 标签页重载。在 PC 端对应于关闭当前应用窗口后重新打开或者在企微侧边栏中重新点击应用图标。这会触发 CEF 容器的重新初始化清空当前的内存状态并重新拉取页面。Android端渲染内核X5腾讯自研的移动端浏览器内核TBS X5缓存策略比标准浏览器激进可能导致PC/安卓端企微容易吃“旧缓存”。将渲染页面通俗比喻为汽车开发者接口/容器WKWebView / CEF —— 汽车的方向盘与仪表盘。它是给开发者使用的开发者通过调用API底层的引擎会自动去驱动网页渲染。底层架构标准WebKit / Blink —— 汽车底盘和转动系统。它决定了车子是单引擎还是多引擎即是否为多进程架构设计决定了网页崩溃时会不会导致整个 App 闪退。4. 技术细节4.1. no-cache重校验不执行排除业务逻辑的问题排除容器本身问题排除容器内核影响容器内容导航/会话的恢复策略(客户端实例化容器的方式)1. 重建容器重新loadRequest2. 复用或恢复旧的WebView清理缓存的方式1. 清理登记的缓存清理按钮2. 清理URLCache/磁盘缓存重新登录内核主文档 no-cache重校验旧包常见来源对策WKWebView经常不执行URLCache 旧条目max-age、BFCacheno-storeCEF偶尔不执行持久磁盘缓存 max-age、BFCacheno-store普通浏览器完全执行无4.2 reopen 旧 /reload 新情况的机制机制一缓存key完整URL不同。机制二关闭WKWebView时保存了页面状态的快照重新打开直接恢复。机制三标准内存缓存。reopen如果未触发BFCache之前的max-age未过期直接读取磁盘缓存reload时依赖HTTP缓存头策略。5、小结更新包之后PC端MacOS企业微信仍访问旧条目出现 F5 能获取到新包 但 再次进入应用又访问旧包的问题。根本原因在于 WkWebView 对主文档的no-cache重校验经常不执行直接加载旧包旧包来源主包括 URLCache/持久磁盘缓存中的旧max-age 条目以及 BFCache 快照 三条路径。最终对策是先手动清除历史遗留的本地缓存副本再为入口文件升级为 no-store 禁止缓存策略。使用map方案map按 $uri 扩展名入口文件给 no-storechunk 给 max-age统一由server级 add_headers下发不碰 location 避免丢失安全头确保每次进入都强制走网络获取最新包。