强制 React Native Web View 忽略 webview 的缓存版本

Posted 2023-03-15

【中文标题】强制 React Native Web View 忽略 webview 的缓存版本

【英文标题】：Force React Native Web View to Ignore cached version of webview

【发布时间】：2016-12-12 21:55:00

【问题描述】：

上下文

目前正在处理一个 html 和 JS 繁重的项目，它是一个 React Native 项目。所有 HTML 和 JS 都在本地引用（没有通过 http）。

问题

每当我对 HTML 或 JS 进行更改时，我都看不到更改（在刷新本机代码或只是再次运行它之后），因此我不得不完全卸载该应用程序。

问题

有没有办法忽略这些文件的缓存版本（假设存在缓存机制）

我没有找到任何关于这个主题的有效资源，所以任何反馈都将不胜感激，谢谢。

【问题讨论】：

你找到解决方案了吗，我在我的 react native 应用程序中遇到了同样的问题。

【参考方案1】：

我假设您正在使用 React Native 的 WebView 组件来呈现您的 HTML 和 javascript。该组件依赖于原生 UIWebView 和 WebView 组件，因此您可以使用与那些相同的过程修改 RN WebView。例如，在 ios 案例中，您可以执行以下操作：

[[NSURLCache sharedURLCache] removeAllCachedResponses];
[[NSURLCache sharedURLCache] setDiskCapacity:0];
[[NSURLCache sharedURLCache] setMemoryCapacity:0];

您可以将该代码放入AppDelegate.m 的didFinishLaunchingWithOptions 方法中。基于this answer。

在 android 情况下，除非您有权访问 WebView 的实例（根据 this answer），否则您无法访问缓存，因此您可以使用 RN WebView 的代码结合缓存创建自己的 WebView-删除功能。它并不像看起来那么复杂。

【参考方案2】：

查看WebView.android.js文件（node_modules/react-native-webview/lib/WebView.android.js），WebView.defaultProps中有一个属性叫cacheEnabled，它是设置为真。

您可以尝试在 WebView JSX 中将 cacheEnabled 属性设置为 false：

<WebView
   cacheEnabled=false
   source= uri: env.APP_URL  style=flex:1 />

【讨论】：

在没有互联网连接的情况下会起作用吗？

@Sagar，我还没有测试过，但可能没有。禁用缓存后，资产将不会在本地存在。

【参考方案3】：

对于 android，存储下的“应用程序信息”设置将允许您清除缓存。这就是您可以强制重新加载您在 WebView 中显示的任何资源的方式。

【讨论】：

这可能是一个更快的选择，但我希望在 RN 项目本身中找到配置。

【参考方案4】：

对我来说，我使用了https://github.com/joeferraro/react-native-cookies，它确实为我清除了 cookie。使用前调用以下WebView

CookieManager
  .clearAll(true)
  .then((res) => 
    console.log('LoginScreen CookieManager.clearAll =>', res)
  )