WebView still reads resources from the cache with cacheEnabled={false}

[ajcrites]

Bug description:
If you have a WebView component with cacheEnabled={false}, the WebView will still get resources from the memory cache.

To Reproduce:
Create a component with <WebView cacheEnabled={false} uri={{ ... }} />. The URI should be to a website with resources that may be cached such as CSS files.

Expected behavior:
Web resources should neither be cached nor read from the cache. If you update a CSS file and revisit the corresponding page in a WebView, it should download the new resources.

Screenshots/Videos:

Safari Developer tools show the page reading resources from the Memory Cache. This happens even if you go to Develop > Empty Caches in Safari.

Environment:

• OS: Mac OS
• OS version: 10.14.6
• react-native version: 0.60.0
• react-native-webview version: 5.12.1

[Gutyn]

Found anything @ajcrites ?

[kabus202]

same here did you guys found a solution? @Gutyn @ajcrites ?

[cesar3030]

+1

[Gutyn]

@kabus202 @cesar3030 my issue was a little different I think, I had troubles using initial-scale in meta tag html to rescale the html but I fixed it with a native patch since it turned out this was not a cache issue.

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[squalvj]

+1

[digitalhuman]

I can confirm the issue is still there.

[sskaditya]

Its still the issue

[Antilopez]

+1

[ArvindNikam76]

issue is still there

[digitalhuman]

The only way to prevent cache is to add: ?<Random string, time seconds whatever>
To the URI

[ajhoel43]

maybe you should give a try for cacheMode={'LOAD_NO_CACHE'} props with cacheEnabled={false} or execute clearCache function manually

[huent-1493]

I try cacheEnabled={false} and cacheMode={'LOAD_NO_CACHE'}. It is work in android, but ios not working. Then I try incognito={true}.
It is work both android and ios.

[luis931]

Even with the following props set on iOS the WebView still seems to read from cached results :/ it does seem to function properly on Android

iOS v14.5
react-native-webview: "^11.13.0"

cacheEnabled={false}
cacheMode={'LOAD_NO_CACHE'}
incognito={true}

[ihafkenschiel]

Anita has a great answer on StackOverflow where she creates an iOS Native Module and bridges it into RN to manually clear the WebView cache:
https://stackoverflow.com/questions/57158559/want-to-clear-cache-from-webview-in-react-native-cookiemanager-clearall-not-w/72546943#72546943

[seco35]

You can clear the webview cache as already suggested in prior comments or simply add a time tag to the uri as a workaround e.g.:
"https://example.com/testhtml?t="+Date.now()
This will be handled as a new uri however not affect the result of your html at all.

[jomla97]

The only way to prevent cache is to add: ?<Random string, time seconds whatever> To the URI

Thank you @digitalhuman, this was the way for me! In my case I needed to integrate a chat widget which uses cookies or localStorage to keep track of the session even if you close the window. This meant that after the webpage had been loaded once even with cacheEnabled=false and you disabled the internet connection, the renderError and onError was not being called and instead a cached page was shown with a non-functional widget. While incognito=true prevented caching it also prevented the widget from resuming the user session between closing/opening the webview.

Simply appending a unix timestamp to the URI (uri + '&' + Date.now()) solved the issue entirely. Simple yet brilliant!