Change RCTImageLoader's Cache System to default NSURLRequest's cache system #8235

namse · 2016-06-20T05:34:19Z

intro

Before this PR, RCTImageLodaer's Cache was too big(200MB on disk) and It doesn't work with HTTP Cache-Control header. So to provide dynamic image, the users must have to add random value on url( ex. adding current date) to avoid cache.

So I change that cache system to default NSURLRequest's cache system, which is well-working with HTTP specs. As the discussion on this issue #7571 , making custom cache policy processor is not ready yet and useless, over-tech things, I think.

Even we have no plan about image cache system(or would change plan later), before having a nice plan, I think we should let user use image module with common HTTP Specs.

So What did I do?

So I remove custom NSURLCache, and make logic like below,

try fetch image,
on response, get Date on response's header and make cacheKey with Date.

(why? because if NSURLRequest's response was cached, the response's Date header dosen't change.)
find decoded image on _decodedImageCache with cacheKey
if there isn't, decode that image and store to _decodedImageCache with cacheKey.

In addition, I didn't stored local image asset on _decodedImageCache because [UIImage imageNamed:] work with its own cache.

Test Plan

just make one simple web-server which provide static images with cache-control header.
set max-old or anything else and test that image was really caching during max-old time.
I've just tested with simple nodejs express server and checked it was perfectly working.

ghost · 2016-06-20T05:34:59Z

By analyzing the blame information on this pull request, we identified @nicklockwood and @rigdern to be potential reviewers.

ghost · 2016-06-20T05:35:00Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

namse · 2016-06-20T08:06:55Z

I don't understand why CI Test failed. Could you explain this to me please?

ghost · 2016-06-20T08:07:07Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

javache · 2016-06-20T16:25:24Z

Libraries/Image/RCTImageLoader.m

-    while (cachedResponse) {
-      if ([cachedResponse.response isKindOfClass:[NSHTTPURLResponse class]]) {
-        NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)cachedResponse.response;
-        if (httpResponse.statusCode == 301 || httpResponse.statusCode == 302) {


Does this logic of following redirects for getting a cache hit still work?

I heard that redirect response cannot arrive as NSURLResponse, and I tested and checked it.
And by line 374, that code doesn't process 301 or 302. I never heard the NSURLResponse whit GET method has status code 301 or 302. If it's wrong, please let me know.

cc'ing original author @hayeah

We don't implement URLSession:willPerformHTTPRedirection: in RCTHTTPRequestHandler. I'm not sure what the default behaviour is here.

I tested that situation, and figured out that NSURLRequest(imageURLRequest)'s URL wasn't same with NSHTTPURLResponse's URL(set as final location of file), and the response's status code is 200(or 404 if there are no file) with that server's response headers.

I think without implementation about URLSession:willPerformHTTPRedirection, the user-agent(in this case, iOS) try redirect and get final server's response.

And I finally found the docs about this.

If the response is an HTTP redirect response, the NSURLSession object calls the delegate’s URLSession:task:willPerformHTTPRedirection:newRequest:completionHandler: method. That delegate method calls the provided completion handler with either the provided NSURLRequest object (to follow the redirect), a new NSURLRequest object (to redirect to a different URL), or nil (to treat the redirect’s response body as a valid response and return it as the result).

If you decide to follow the redirect, go back to step 2.

If the delegate doesn’t implement this method, the redirect is followed up to the maximum number of redirects.

javache · 2016-06-20T16:32:37Z

In addition, I didn't stored local image asset on _decodedImageCache because [UIImage imageNamed:] work with its own cache.

This is already being looked at in #8102, could you not do it here?

javache · 2016-06-20T16:33:15Z

Libraries/Image/RCTImageLoader.m

@@ -377,9 +371,26 @@ - (RCTImageLoaderCancellationBlock)loadImageOrDataWithURLRequest:(NSURLRequest *
                                                   userInfo:nil], nil);
          return;
        }
+
+        NSString* responseDate = ((NSHTTPURLResponse *)response).allHeaderFields[@"Date"];


nit: our formatting guideline is NSString *responseDate. Could you apply that consistently everywhere?

namse · 2016-06-21T05:17:14Z

@javache

(In addition, I didn't stored local image asset on _decodedImageCache because [UIImage imageNamed:] work with its own cache.)

This is already being looked at in #8102, could you not do it here?

Actually I didn't touch anything about local asset images. And my point is, "because we use [UIImage imageNamed:](and it use ios's cache system), we don't have to cache decoded local asset image's UIImage on _decodedImageCache. Is it something wrong?

namse · 2016-06-21T05:35:11Z

edited wrong formatted codes and useless nested block.

javache · 2016-06-21T22:36:43Z

Libraries/Image/RCTImageLoader.m


-      // Call handler
+        [weakSelf decodeImageData:data


Can you nest this in the else block and have a shared return statement after the block?

javache · 2016-06-21T22:40:27Z

Where in this diff do we configure NSURLRequest to actually do caching?

namse · 2016-06-22T00:08:36Z

Where in this diff do we configure NSURLRequest to actually do caching?

I found we didn't set any cache-policy about NSURLRequest, and then the default value is NSURLRequestUseProtocolCachePolicy, which is working with this flow,

you can find this on this doc

Actually I don't know very much wher the NSURLRequest created, but I searched whole code which create NSURLRequest instance, and they just use [NSURLRequest requestWithURL:], not [NSURLRequest requestWithURL:cachePolicy:timeoutInterval:]. then, the default cache policy is NSURLRequestUseProtocolCachePolicy. and we can't set cachePolicy Property because it is read-only.

I can't edit all of that because I have no idea how much do we have to set the timeout Interval.

namse · 2016-06-22T03:06:45Z

Can you nest this in the else block and have a shared return statement after the block?

(line 366 ~ 391) Done.

Use NO instead of false

(line 730) Done.

javache · 2016-06-22T10:01:38Z

Thanks! I'll check this out internally and verify that caching works correctly in our use-cases.

javache · 2016-06-22T10:01:47Z

@facebook-github-bot import

ghost · 2016-06-22T10:02:15Z

Thanks for importing. If you are an FB employee go to Phabricator to review.

mmmulani · 2016-07-05T10:23:26Z

Libraries/Image/RCTImageLoader.m


-      // Call handler
-      completionHandler(nil, data);
+        NSString *responseDate = ((NSHTTPURLResponse *)response).allHeaderFields[@"Date"];


could you handle the case where this is nil and replace with the empty string?

I think it is good point, because the Date header is not 'MUST' thing on RFC2616.

@mmmulani But, before editing, then how can we know that response has cached or not which has no Date header?
In that case, what about ignore checking cache?

yea I briefly discussed that with @javache, our thinking was that since the server has to allow us to cache a request but is not providing a Date header, it is okay to cache it.

to be honest, this should really never show up, so I am also okay with ignoring checking the cache

@mmmulani Because we never know the response has cached without Date header, so I just ignore checking decoded cache and just let them decoded.
This case is so rare, so it could be ok to ignore caching, I guess.
I've just tested with simple NodeJS ExpressJS server with removing Date header (res.removeHeader('Date')), and I checked there are no Date header with Chrome Developer Tools, and with react-native's UIExplorer example, finally checked this logic work nicely.

Summary: Because there are no cache-control system on RCTImageLoader, we must have to add random value on URL to fetch dynamic images. So without implement of NSURLCache's custom cache control system, I just put the NSURLRequest's default cache system which is well-working. And on local image, [UIImage named:] has its own cache system, so I just consider only url request one. After fetching, it check that response was on cache with the clue - response's Date header. the cached response always has the same date. So I made cacheKey adding response's date, and store decoded image with that cacheKey. If the image was on NSURLRequest's cache, without decoding imageData again, just got decoded image on _decodedImageCache.

namse · 2016-07-06T07:27:36Z

@mmmulani @javache I have a question. In general case, how update the commit which is already on pull-request? I generally add commit with --amend commend to make simple the pull-request, but sometime it make me confused because there are no history about small changes.

ide · 2016-07-07T00:14:31Z

sometime it make me confused because there are no history about small changes

Then you should split your PR into multiple PRs. One PR = one commit = one idea.

namse · 2016-07-11T00:11:15Z

Could I ask you how it is going? I just wonder how facebook's engineer work or test or anything.

mmmulani · 2016-07-11T17:03:49Z

@skatpgusskat hey we're taking a look at it still, hoping to land it by the end of this week

…system Summary: Before this PR, ```RCTImageLodaer```'s Cache was too big(200MB on disk) and It doesn't work with HTTP Cache-Control header. So to provide dynamic image, the users must have to add random value on url( ex. adding current date) to avoid cache. So I change that cache system to default ```NSURLRequest```'s cache system, which is well-working with HTTP specs. As the discussion on this issue facebook#7571 , making custom cache policy processor is not ready yet and useless, over-tech things, I think. Even we have no plan about image cache system(or would change plan later), before having a nice plan, I think we should let user use image module with common HTTP Specs. So I remove custom ```NSURLCache```, and make logic like below, 1. try fetch image, 2. on response, get ```Date``` on response's header and make ```cacheKey``` with ```Date```. > (why? because if ```NSURLRequest```'s response was cached, the response's ```Date``` header dosen't change.) 3. find decoded imag Closes facebook#8235 Reviewed By: bnham Differential Revision: D3469086 Pulled By: javache fbshipit-source-id: 35a5552cda6e6c367481020bbf3c28eb4a9d0207

ghost added the GH Review: review-needed label Jun 20, 2016

ghost 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 Jun 20, 2016

namse force-pushed the master branch 2 times, most recently from b9e8951 to fab719b Compare June 20, 2016 12:54

javache reviewed Jun 20, 2016
View reviewed changes

namse force-pushed the master branch from 2504b4e to b92c9cd Compare June 21, 2016 05:34

javache reviewed Jun 21, 2016
View reviewed changes

namse force-pushed the master branch from b92c9cd to 58b1579 Compare June 22, 2016 03:04

javache added GH Review: accepted and removed GH Review: review-needed labels Jun 22, 2016

mmmulani reviewed Jul 5, 2016
View reviewed changes

namse force-pushed the master branch from 58b1579 to b92c9cd Compare July 6, 2016 05:49

namse force-pushed the master branch from b92c9cd to 19407be Compare July 6, 2016 06:14

ghost 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 Jul 12, 2016

ghost closed this in 631785f Jul 21, 2016

react-one pushed a commit to react-one/react-native that referenced this pull request Sep 24, 2021

chore: fix repo url in readme (facebook#8235)

7623945

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change RCTImageLoader's Cache System to default NSURLRequest's cache system #8235

Change RCTImageLoader's Cache System to default NSURLRequest's cache system #8235

namse commented Jun 20, 2016 •

edited

Loading

ghost commented Jun 20, 2016

ghost commented Jun 20, 2016

namse commented Jun 20, 2016 •

edited

Loading

ghost commented Jun 20, 2016

javache Jun 20, 2016

namse Jun 21, 2016

javache Jun 21, 2016

namse Jun 21, 2016 •

edited

Loading

namse Jun 21, 2016

javache commented Jun 20, 2016

javache Jun 20, 2016

namse commented Jun 21, 2016 •

edited

Loading

namse commented Jun 21, 2016

javache Jun 21, 2016

javache commented Jun 21, 2016

namse commented Jun 22, 2016 •

edited

Loading

namse commented Jun 22, 2016 •

edited

Loading

javache commented Jun 22, 2016

javache commented Jun 22, 2016

ghost commented Jun 22, 2016

mmmulani Jul 5, 2016

namse Jul 5, 2016

namse Jul 5, 2016 •

edited

Loading

mmmulani Jul 5, 2016

namse Jul 6, 2016 •

edited

Loading

namse commented Jul 6, 2016 •

edited

Loading

ide commented Jul 7, 2016

namse commented Jul 11, 2016

mmmulani commented Jul 11, 2016

Change RCTImageLoader's Cache System to default NSURLRequest's cache system #8235

Change RCTImageLoader's Cache System to default NSURLRequest's cache system #8235

Conversation

namse commented Jun 20, 2016 • edited Loading

intro

So What did I do?

Test Plan

ghost commented Jun 20, 2016

ghost commented Jun 20, 2016

namse commented Jun 20, 2016 • edited Loading

ghost commented Jun 20, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

namse Jun 21, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javache commented Jun 20, 2016

Choose a reason for hiding this comment

namse commented Jun 21, 2016 • edited Loading

namse commented Jun 21, 2016

Choose a reason for hiding this comment

javache commented Jun 21, 2016

namse commented Jun 22, 2016 • edited Loading

namse commented Jun 22, 2016 • edited Loading

javache commented Jun 22, 2016

javache commented Jun 22, 2016

ghost commented Jun 22, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

namse Jul 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

namse Jul 6, 2016 • edited Loading

Choose a reason for hiding this comment

namse commented Jul 6, 2016 • edited Loading

ide commented Jul 7, 2016

namse commented Jul 11, 2016

mmmulani commented Jul 11, 2016

namse commented Jun 20, 2016 •

edited

Loading

namse commented Jun 20, 2016 •

edited

Loading

namse Jun 21, 2016 •

edited

Loading

namse commented Jun 21, 2016 •

edited

Loading

namse commented Jun 22, 2016 •

edited

Loading

namse commented Jun 22, 2016 •

edited

Loading

namse Jul 5, 2016 •

edited

Loading

namse Jul 6, 2016 •

edited

Loading

namse commented Jul 6, 2016 •

edited

Loading