只有 WebSocket 页面在 iOS 回退后显示旧版本的问题解决方案

只有 WebSocket 页面在 iOS 回退后显示旧版本的问题解决方案问题背景在云闪付小程序Uniapp Vue3 H5中仅包含 WebSocket 连接的页面在跳转至第三方页面如支付收银台并返回后页面显示为旧版本代码例如新增的按钮消失、版本号回退而其他普通页面表现正常。根本原因iOS WKWebView 缓存策略跳转第三方时系统会挂起或销毁后台 WebView。WebSocket 高耗能特性带 WebSocket 的页面更容易被系统回收Kill以节省内存和电量。缓存复用页面被回收后重新加载时浏览器读取了本地缓存的旧 HTML/JS/CSS 文件导致显示旧版本。普通页面不受影响因为它们常驻内存未被销毁返回时直接从缓存恢复不会重新加载因此不会触发缓存问题。解决方案方案一跳转前主动关闭 WebSocket 连接作用释放资源降低页面被系统回收的概率。// 在跳转第三方页面前执行constcloseWebSocket(){if(socketTask){socketTask.close({success:()console.log(WebSocket 已关闭),fail:(err)console.error(关闭失败,err)});socketTasknull;}};// 跳转示例constgoToThirdParty(){closeWebSocket();uni.navigateTo({url:/pages/third-party/pay});};方案二跳转前给当前页面 URL 添加时间戳作用确保页面即使被回收重新加载也强制获取最新资源绕过缓存。// 方法 A在跳转前修改当前 URL推荐constaddTimestampToUrl(){consturlwindow.location.href;constseparatorurl.includes(?)?:?;constcleanUrlurl.replace(/[?]_t\d/,);// 去除旧时间戳constnewUrlcleanUrlseparator_tDate.now();window.history.replaceState({},,newUrl);};// 方法 B在 App.vue 或入口文件全局监听兜底window.addEventListener(pageshow,(event){if(event.persisted){// 从缓存恢复时强制刷新window.location.reload();}});// 跳转示例组合方案一二constgoToThirdParty(){closeWebSocket();// 方案一addTimestampToUrl();// 方案二uni.navigateTo({url:/pages/third-party/pay});};