Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cache policy control for image source
Summary: In the context of an app an image exists in three resolutions on the server: `thumb` (30px) `feed` (300px) `full` (900px). When looking at an individual item a user can come either from the feed, via a permalink or from other parts of the app. This allows a situation where the `feed` image might or might not already be loaded somewhere in the app. In the detail view I want to render `thumb` with a blur (to quickly display something), then the `feed` image if it exists to have something decent to display until `full` loads. However it is quite a waste to load the `feed` image if it isn't already in cache, and will slow down the time until `full` is loaded. It is possible to track the navigation from feed->detail and that the `feed` image has actually completed loading by the feed component however as component hierarchies grow this turns into quite a lot of prop passing and bad separation of concerns. NSURLRequests accepts a [Cache Policy](https://developer.apple.com/reference/fo Closes #10844 Differential Revision: D4425959 Pulled By: lacker fbshipit-source-id: 679835439c761a2fc894f56eb6d744c036cf0b49
- Loading branch information
1 parent
a6844bd
commit 52d8851
Showing
9 changed files
with
206 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
/** | ||
* Copyright (c) 2015-present, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
* | ||
* @flow | ||
*/ | ||
'use strict'; | ||
|
||
var React = require('react'); | ||
var ReactNative = require('react-native'); | ||
var { | ||
Image, | ||
View, | ||
Text, | ||
StyleSheet, | ||
} = ReactNative; | ||
var { TestModule } = ReactNative.NativeModules; | ||
|
||
/* | ||
* The reload and force-cache tests don't actually verify that the complete functionality. | ||
* | ||
* reload: Should have the server set a long cache header, then swap the image on next load | ||
* with the test comparing the old image to the new image and making sure they are different. | ||
* | ||
* force-cache: Should do the above but set a no-cache header. The test should compare the first | ||
* image with the new one and make sure they are the same. | ||
*/ | ||
|
||
const TESTS = ['only-if-cached', 'default', 'reload', 'force-cache']; | ||
|
||
type Props = {} | ||
type State = { | ||
'only-if-cached'?: boolean, | ||
'default'?: boolean, | ||
'reload'?: boolean, | ||
'force-cache'?: boolean, | ||
} | ||
|
||
class ImageCachePolicyTest extends React.Component { | ||
state = {} | ||
|
||
shouldComponentUpdate(nextProps: Props, nextState: State) { | ||
const results: Array<?boolean> = TESTS.map(x => nextState[x]); | ||
|
||
if (!results.includes(undefined)) { | ||
const result: boolean = results.reduce((x,y) => x === y === true, true) | ||
TestModule.markTestPassed(result); | ||
} | ||
|
||
return false; | ||
} | ||
|
||
testComplete(name: string, pass: boolean) { | ||
this.setState({[name]: pass}); | ||
} | ||
|
||
render() { | ||
return ( | ||
<View style={{flex: 1}}> | ||
<Text>Hello</Text> | ||
<Image | ||
source={{ | ||
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(), | ||
cache: 'only-if-cached' | ||
}} | ||
onLoad={() => this.testComplete('only-if-cached', false)} | ||
onError={() => this.testComplete('only-if-cached', true)} | ||
style={styles.base} | ||
/> | ||
<Image | ||
source={{ | ||
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(), | ||
cache: 'default' | ||
}} | ||
onLoad={() => this.testComplete('default', true)} | ||
onError={() => this.testComplete('default', false)} | ||
style={styles.base} | ||
/> | ||
<Image | ||
source={{ | ||
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(), | ||
cache: 'reload' | ||
}} | ||
onLoad={() => this.testComplete('reload', true)} | ||
onError={() => this.testComplete('reload', false)} | ||
style={styles.base} | ||
/> | ||
<Image | ||
source={{ | ||
uri: 'https://facebook.github.io/react/img/logo_small_2x.png?cacheBust=notinCache' + Date.now(), | ||
cache: 'force-cache' | ||
}} | ||
onLoad={() => this.testComplete('force-cache', true)} | ||
onError={() => this.testComplete('force-cache', false)} | ||
style={styles.base} | ||
/> | ||
</View> | ||
); | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
base: { | ||
width: 100, | ||
height: 100, | ||
}, | ||
}); | ||
|
||
ImageCachePolicyTest.displayName = 'ImageCachePolicyTest'; | ||
|
||
module.exports = ImageCachePolicyTest; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52d8851
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The cache policy attached in the description is broken.