Skip to content
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

[Android] Add HTTP cache by default (like iOS) #18348

Closed
wants to merge 3 commits into from

Conversation

Minishlink
Copy link
Contributor

@Minishlink Minishlink commented Mar 13, 2018

Motivation

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

Test Plan

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
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',
  },
});

Related PRs

None

Release Notes

[ANDROID] [FEATURE] [Networking] Add HTTP caching

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 13, 2018
@Minishlink
Copy link
Contributor Author

cc @hramos as you reviewed recent PRs about networking ;)

@hramos hramos added Android 🌐Networking Related to a networking API. and removed Android labels Mar 13, 2018
@react-native-bot react-native-bot added Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command. Missing Changelog This PR appears to be missing a changelog, or they are incorrectly formatted. Android labels Mar 14, 2018
@react-native-bot react-native-bot added Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. labels Mar 18, 2018
@facebook-github-bot
Copy link
Contributor

@Minishlink I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

@dulmandakh
Copy link
Contributor

Could you please make cache size to be configurable from manifest or gradle scripts.

@hramos hramos added ✅Changelog and removed Missing Changelog This PR appears to be missing a changelog, or they are incorrectly formatted. labels Jan 15, 2019
@facebook-github-bot facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Jan 15, 2019
Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@Minishlink
Copy link
Contributor Author

@hramos OKHTTP docs say these are bytes, I may be wrong but I think the unit should then be MB (megabytes) or Mo (megaoctets), as Mb stands for megabits

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot
Copy link
Collaborator

@Minishlink merged commit cf85d0e into facebook:master.

@facebook facebook locked as resolved and limited conversation to collaborators Jan 17, 2019
@react-native-bot react-native-bot added the Merged This PR has been merged. label Jan 17, 2019
grabbou pushed a commit that referenced this pull request Jan 23, 2019
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
@hramos hramos removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Feb 6, 2019
matt-oakes pushed a commit to matt-oakes/react-native that referenced this pull request Feb 7, 2019
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
suheb pushed a commit to suheb/react-native that referenced this pull request Feb 14, 2019
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
t-nanava pushed a commit to microsoft/react-native-macos that referenced this pull request Jun 17, 2019
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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. 🌐Networking Related to a networking API. Platform: Android Android applications. Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Networking on Android doesn't use Cache
6 participants