问题
使用了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.