This article is going to study the caching relationships of S3 / CloudFront / ReactNative. The steps of creating S3 bucket and CloudFront Distribution are already introduced in the last article ofAWS CloudFront 介绍及配置. If you don't know how to create them, please go to the last article to study.

1. Cache Configurations of S3 and CloudFront.

S3: 

Select the file in your S3 bucket then click "Change metadata", you can add "Cache-Control" and "Expires" Key to control the cache behaviors of the object.

CloudFront:

2. Keywords of Cache Settings.

- Cache-Control max-age

The Cache-Control max-age directive lets you specify how long (in seconds) that you want an object to remain in the cache before CloudFront gets the object again from the origin server. The minimum expiration time CloudFront supports is 0 seconds for web distributions and 3600 seconds for RTMP distributions. The maximum value is 100 years. 


- Cache-Control s-maxage

If you want objects to stay in CloudFront edge caches for a different duration than they stay in browser caches, you can use the Cache-Control max-age and Cache-Control s-maxage directives together.


- Expires

The Expires header field lets you specify an expiration date and time using the format specified in RFC 2616, Hypertext Transfer Protocol -- HTTP/1.1 Section 3.3.1, Full Date.We recommend that you use the Cache-Control max-age directive instead of the Expires header field to control object caching. If you specify values both for Cache-Control max-age and for Expires, CloudFront uses only the value of Cache-Control max-age.


- Minimum TTL

Specify the minimum amount of time, in seconds, that you want objects to stay in CloudFront caches before CloudFront forwards another request to your origin to determine whether the object has been updated. The default value for Minimum TTL is 0 seconds.


- Maximum TTL

Specify the maximum amount of time, in seconds, that you want objects to stay in CloudFront caches before CloudFront queries your origin to see whether the object has been updated. The value that you specify for Maximum TTL applies only when your origin adds HTTP headers such as Cache-Control max-age, Cache-Control s-maxage, or Expires to objects. 


- Default TTL

Specify the default amount of time, in seconds, that you want objects to stay in CloudFront caches before CloudFront forwards another request to your origin to determine whether the object has been updated. The value that you specify for Default TTL applies only when your origin does not add HTTP headers such as Cache-Control max-age, Cache-Control s-maxage, or Expires to objects. 


- Use Origin Cache Headers

Select Use Origin Cache Headers if your origin server is adding a Cache-Control header to control how long your objects stay in the CloudFront cache. 

3. The Caching Relationships of S3 / CloudFront / ReactNative.

ios:

React Native cache use `default`:

Use the native platforms default strategy.  `useProtocolCachePolicy` on iOS.

React Native cache use `reload`:

The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.

<Image style={styles.image}  source={{uri: 'https://xxx.cloudfront.net/picture.jpg', cache:'reload'}}/>

React Native cache use `force-cache`:

The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.

<Image style={styles.image}  source={{uri: 'https://xxx.cloudfront.net/picture.jpg', cache:'force-cache'}}/>

React Native cache use `only-if-cached`:

The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the 

cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is 

considered to have failed.

<Image style={styles.image}  source={{uri: 'https://xxx.cloudfront.net/picture.jpg', cache:'only-if-cached'}}/>

android:

React Native cache use `default`: