-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Networking on Android doesn't use Cache #16795
Comments
Where the client is created, a |
It almost sounds it'd be useful for everyone to be able to configure okhttp client. I think a way to customize the okhttp client is crucial for certain set of applications, such as 1. self signed certs, customizing caching, certificate pinning, etc. |
I used reflection to mitigate this. |
We do the same thing as well. I also totally agree that configurable OkHttpClient is extremely useful and very unfortunate that it has been broken. There are already PRs for that:
Even without that, I still think that having private OkHttpClient createClient(ReactApplicationContext context) {
return OkHttpClientProvider.createClient().newBuilder()
.cache(new Cache(new File(context.getCacheDir(), "rn-http-cache"), 50 * 1024 * 1024))
.build();
} |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions. |
I think this is important. |
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions. |
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information. |
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, the cache is enabled by default but it's not the case on Android. This PR adds 10Mo of HTTP cache by default. 10Mo was chosen arbitrarily. Fixes #16795 <!--(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)--> I wrote it so there's no breaking change for those already using the `OkHttpClientProvider.createClient` and `OkHttpClientProvider.createClientBuilder` public methods. 1. react-native init TestAndroidCache 2. Followed https://facebook.github.io/react-native/docs/android-building-from-source.html to build with this branch as react-native 3. Added the following code in the App.js (with correct URL_WITH_CACHE_CONTROL) 4. Made sure the debugger is closed 5. Throttled my mac's network speed with the `Network link conditioner` (edge) 6. Tapped "Fetch", it shows ~4000 7. Tapped "Fetch" again, it shows ~6 ```js import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button } from 'react-native'; type Props = {}; export default class App extends Component<Props> { fetch = () => { const start = Date.now(); fetch('{URL_WITH_CACHE_CONTROL}').then(() => { const diff = Date.now() - start; Alert.alert(diff.toString()); }); }; render() { return ( <View style={styles.container}> <Button title={"fetch"} onPress={this.fetch} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); ``` None <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [ANDROID] [FEATURE] [Networking] Add HTTP caching Pull Request resolved: #18348 Differential Revision: D13680430 Pulled By: hramos fbshipit-source-id: 1e49cf75702db72b20a316e9cdd971605f8fe7e0
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, the cache is enabled by default but it's not the case on Android. This PR adds 10Mo of HTTP cache by default. 10Mo was chosen arbitrarily. Fixes #16795 <!--(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)--> I wrote it so there's no breaking change for those already using the `OkHttpClientProvider.createClient` and `OkHttpClientProvider.createClientBuilder` public methods. 1. react-native init TestAndroidCache 2. Followed https://facebook.github.io/react-native/docs/android-building-from-source.html to build with this branch as react-native 3. Added the following code in the App.js (with correct URL_WITH_CACHE_CONTROL) 4. Made sure the debugger is closed 5. Throttled my mac's network speed with the `Network link conditioner` (edge) 6. Tapped "Fetch", it shows ~4000 7. Tapped "Fetch" again, it shows ~6 ```js import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button } from 'react-native'; type Props = {}; export default class App extends Component<Props> { fetch = () => { const start = Date.now(); fetch('{URL_WITH_CACHE_CONTROL}').then(() => { const diff = Date.now() - start; Alert.alert(diff.toString()); }); }; render() { return ( <View style={styles.container}> <Button title={"fetch"} onPress={this.fetch} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); ``` None <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [ANDROID] [FEATURE] [Networking] Add HTTP caching Pull Request resolved: #18348 Differential Revision: D13680430 Pulled By: hramos fbshipit-source-id: 1e49cf75702db72b20a316e9cdd971605f8fe7e0
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, the cache is enabled by default but it's not the case on Android. This PR adds 10Mo of HTTP cache by default. 10Mo was chosen arbitrarily. Fixes facebook#16795 <!--(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)--> I wrote it so there's no breaking change for those already using the `OkHttpClientProvider.createClient` and `OkHttpClientProvider.createClientBuilder` public methods. 1. react-native init TestAndroidCache 2. Followed https://facebook.github.io/react-native/docs/android-building-from-source.html to build with this branch as react-native 3. Added the following code in the App.js (with correct URL_WITH_CACHE_CONTROL) 4. Made sure the debugger is closed 5. Throttled my mac's network speed with the `Network link conditioner` (edge) 6. Tapped "Fetch", it shows ~4000 7. Tapped "Fetch" again, it shows ~6 ```js import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button } from 'react-native'; type Props = {}; export default class App extends Component<Props> { fetch = () => { const start = Date.now(); fetch('{URL_WITH_CACHE_CONTROL}').then(() => { const diff = Date.now() - start; Alert.alert(diff.toString()); }); }; render() { return ( <View style={styles.container}> <Button title={"fetch"} onPress={this.fetch} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); ``` None <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [ANDROID] [FEATURE] [Networking] Add HTTP caching Pull Request resolved: facebook#18348 Differential Revision: D13680430 Pulled By: hramos fbshipit-source-id: 1e49cf75702db72b20a316e9cdd971605f8fe7e0
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, the cache is enabled by default but it's not the case on Android. This PR adds 10Mo of HTTP cache by default. 10Mo was chosen arbitrarily. Fixes facebook#16795 <!--(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)--> I wrote it so there's no breaking change for those already using the `OkHttpClientProvider.createClient` and `OkHttpClientProvider.createClientBuilder` public methods. 1. react-native init TestAndroidCache 2. Followed https://facebook.github.io/react-native/docs/android-building-from-source.html to build with this branch as react-native 3. Added the following code in the App.js (with correct URL_WITH_CACHE_CONTROL) 4. Made sure the debugger is closed 5. Throttled my mac's network speed with the `Network link conditioner` (edge) 6. Tapped "Fetch", it shows ~4000 7. Tapped "Fetch" again, it shows ~6 ```js import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button } from 'react-native'; type Props = {}; export default class App extends Component<Props> { fetch = () => { const start = Date.now(); fetch('{URL_WITH_CACHE_CONTROL}').then(() => { const diff = Date.now() - start; Alert.alert(diff.toString()); }); }; render() { return ( <View style={styles.container}> <Button title={"fetch"} onPress={this.fetch} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); ``` None <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [ANDROID] [FEATURE] [Networking] Add HTTP caching Pull Request resolved: facebook#18348 Differential Revision: D13680430 Pulled By: hramos fbshipit-source-id: 1e49cf75702db72b20a316e9cdd971605f8fe7e0
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, the cache is enabled by default but it's not the case on Android. This PR adds 10Mo of HTTP cache by default. 10Mo was chosen arbitrarily. Fixes facebook#16795 <!--(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)--> I wrote it so there's no breaking change for those already using the `OkHttpClientProvider.createClient` and `OkHttpClientProvider.createClientBuilder` public methods. 1. react-native init TestAndroidCache 2. Followed https://facebook.github.io/react-native/docs/android-building-from-source.html to build with this branch as react-native 3. Added the following code in the App.js (with correct URL_WITH_CACHE_CONTROL) 4. Made sure the debugger is closed 5. Throttled my mac's network speed with the `Network link conditioner` (edge) 6. Tapped "Fetch", it shows ~4000 7. Tapped "Fetch" again, it shows ~6 ```js import React, { Component } from 'react'; import { StyleSheet, Alert, View, Button } from 'react-native'; type Props = {}; export default class App extends Component<Props> { fetch = () => { const start = Date.now(); fetch('{URL_WITH_CACHE_CONTROL}').then(() => { const diff = Date.now() - start; Alert.alert(diff.toString()); }); }; render() { return ( <View style={styles.container}> <Button title={"fetch"} onPress={this.fetch} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); ``` None <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [ANDROID] [FEATURE] [Networking] Add HTTP caching Pull Request resolved: facebook#18348 Differential Revision: D13680430 Pulled By: hramos fbshipit-source-id: 1e49cf75702db72b20a316e9cdd971605f8fe7e0
The HTTP Client on Android (OkHttpClient), that is used for networking, doesn't have cache, so Cache-Control headers are not respected.
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 8.9.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: 3.0 AI-171.4408382
Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: ^0.50.1 => 0.50.1
Steps to Reproduce
If you use
fetch
to perform a request, and the response hasCache-Control
headers, then they should be respected. For example, if the response has theCache-Control: max-age=60
headers, then, after a successful request the response should be cached. Subsequent requests in the next minute should serve the content from cache.Expected Behavior
Cache headers should be respected and subsequent requests should be served from the cache.
Actual Behavior
On iOS cache headers are respected and responses are served from the cache when necessary.
On Android cache headers are not respected and server is always hit.
Reproducible Demo
Server app that returns a random number between 0 - 100. It sets cache-control header:
https://github.com/andon/cache-tester-server/blob/master/index.js
https://evening-temple-40153.herokuapp.com/route/random
React-Native App that targets the server app and can be used to showcase the different behaviour on iOS and Android:
https://snack.expo.io/SJJLdpBkz
The text was updated successfully, but these errors were encountered: