Force React Native Web View to Ignore cached version of webview

Question

Context

Currently working a HTML & JS heavy project that is a react native project. All HTML & JS are referenced locally (nothing over http).

Problem

Whenever I make changes to HTML or JS I don't see the changes (after refreshing the native code or simply running it again) so I'm forced to completely uninstall the app.

Question

Is there a way to ignore the cached version of these files (am assuming a caching mechanism exists)

I haven't found any valid resource regarding this topic, so any feedback would be greatly appreciated, thanks.

Answer 1

I am assuming that you are using React Native's WebView component to render your HTML and JavaScript. This component relies on the native UIWebView and WebView components, so you can modify the RN WebView using the same procedures as for those. For example, in the iOS case, you can do the following:

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

You can put that code in your didFinishLaunchingWithOptions method of AppDelegate.m. Based on this answer.

In the Android case you cannot access the cache unless you have access to the WebView's instance (according to this answer), so what you can do is create your own WebView using the code of the RN WebView combined with the cache-deleting functionality. It's not as complicated as it might seem.

Answer 2

Looking at the WebView.android.js file (node_modules/react-native-webview/lib/WebView.android.js), there is a property in WebView.defaultProps called cacheEnabled and it is set to true.

You could try setting the cacheEnabled property to false in your WebView JSX:

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

Answer 3

For me, I used https://github.com/joeferraro/react-native-cookies, and it does clear the cookies for me. Call the following before you use WebView

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