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.

did you found and solution, i am facing same problem in my react native app. — Ravi Bhandari, Feb 05 '21 at 09:38

score 4 · Answer 1 · edited May 23 '17 at 12:18

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.

score 3 · Answer 2 · answered Mar 31 '20 at 21:44

3

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}} />

answered Mar 31 '20 at 21:44

Jim

1,088
9
12

Will it work when there is no internet connectivity ? – Sagar Mar 24 '21 at 05:52
@Sagar, I haven't tested that, but probably not. With the cache disabled, the assets wouldn't exist locally. – Jim Mar 26 '21 at 14:47

score 1 · Answer 3 · answered Jan 21 '19 at 10:18

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)
  })

score 0 · Answer 4 · answered May 20 '17 at 06:19

0

For android, the "App info" setting, under Storage will allow you to clear cache. This is how you can force a reload of any resources you are displaying in the WebView.

answered May 20 '17 at 06:19

Kyle Shrader

912
11
16

This might be a quicker alternative, but I was hoping to find a configuration in the RN project itself. – em_ May 25 '17 at 14:33

Force React Native Web View to Ignore cached version of webview

4 Answers4