react-native中嵌套的WebView发版后未更新问题

问题

使用了react-native-webview的WebView嵌套h5页面,但是当h5发版之后,重新打开app,h5还是发版前的页面。
并且这个缓存严重,每次都要清理缓存或者重装app,页面不能及时更新,影响用户体验。

解决

rn项目中,在h5链接后边拼接时间戳,代码如下:
注意:这里缓存使用的是@react-native-async-storage/async-storage。
代码中的customerStateStorage是自己封装的本地存储的公共方法,代码主要是提供思路

let refreshTime = await customerStateStorage.refreshTime;
let currentTime = new Date().getTime();
if (refreshTime && currentTime - refreshTime <= 30 * 60 * 1000) { // 30分钟后更新
   currentTime = refreshTime;
} else {
  customerStateStorage.setRefreshTime(currentTime);
}
const baseUrl = 'xxxx';
setWebViewUrl(baseUrl + '?' + currentTime);

以上代码相当于,在h5发版之后,30分钟后退出app,重新进入app,h5即可刷新。
这个时间自己可以按需修改,时间太短可能用户多次退出重进app,每次都需要重新加载h5相关资源。
最简单粗暴的方法也可以直接在链接后边拼接随机数或时间戳,即可实现每次退出重进app都可以重新加载h5.

附:
无视以下代码:
customerStateStorage.js 代码修改

get refreshTime() {
  return super.get(statesConf.StateStorageKeys.refreshTime);
}
    
setRefreshTime = (value) => {
  return super.set(statesConf.StateStorageKeys.refreshTime, value);
};

posted @ 2023-12-13 14:44  ZerlinM  阅读(121)  评论(0编辑  收藏  举报