ionic 5应用内嵌iFrame加载Firebase Hosting页面内容不更新问题

• 技术栈构成：基于Ionic 5、Cordova、Angular 11开发跨端移动应用，单页面内通过iFrame组件内嵌远程页面，该远程页面托管于Firebase Hosting平台
• 异常表现：Firebase Hosting上的网页完成修改并发布后，通过外部浏览器直接访问该网页URL，可正常加载所有最新更新内容；但在移动应用内打开嵌入该页面的iFrame时，始终加载旧版本内容，未同步最新发布的改动
• 初步排查结论：问题大概率由多层缓存机制叠加导致，但尚未明确具体缓存层级，也未找到对应刷新缓存的操作路径

常见缓存来源（对应本技术栈场景） #

• 应用内置WebView本地缓存：Cordova封装的系统WebView默认会对加载过的远程页面留存本地缓存，该缓存逻辑独立于浏览器端缓存规则，不受Firebase Hosting配置的响应头直接控制
• 组件复用级缓存：Ionic页面在路由复用、切前台返回的场景下，不会主动销毁已加载的iFrame DOM节点，导致旧页面长期驻留
• CDN/网络中间层缓存：Firebase Hosting的CDN节点如果对嵌入页面设置了过长的缓存过期时间，会导致不同网络环境下拉取到不同版本的内容

可落地的排查与解决步骤 #

• 配置WebView层的缓存规则
  • 安卓平台：在Cordova WebView初始化时，将缓存模式设置为不使用本地缓存，对应配置代码为webView.settings.cacheMode = WebSettings.LOAD_NO_CACHE，同时在应用版本更新时主动清理WebView的本地缓存目录
  • iOS平台：在WKWebView初始化时，将全局URL缓存的内存、磁盘容量设置为0，禁用系统层面的网络请求缓存
• 给iFrame的源URL绑定动态版本标识，强制破缓存
  • 替换iFrame固定的src值，在拼接URL时追加和实际部署版本绑定的查询参数，例如https://你的托管域名/嵌入页面路径.html?deploy_time=${最近一次的部署时间戳}，这类带唯一标识的请求会绕过所有本地缓存的匹配规则
  • 注意不要使用无意义的随机数作为查询参数，否则会完全失去缓存的性能优势，需要将参数值和实际发布的托管页面版本一一对应
• 调整iFrame组件的生命周期逻辑
  • 在应用从后台切换回前台、用户触发手动刷新操作时，主动重置iFrame的src属性，触发页面重新加载
  • 在页面离开时，将iFrame的src临时置为about:blank，释放旧页面占用的缓存资源
• 校验Firebase Hosting的缓存配置
  • 检查firebase.json中的缓存头规则，针对嵌入页面对应的HTML文件，设置Cache-Control: no-cache, must-revalidate的响应头，避免CDN节点长期留存旧版本HTML内容

内容的提问来源于stack exchange，提问作者Aion