5

I have a react app in which I am doing fetch request to backend API's. I am trying to implement caching in the UI side for heavy request.

I am able to do it successfully in Mozilla Firefox and it's working perfectly fine. But chrome is giving me hard time. Here is the piece of code I am trying to implement -

        fetch(URL, {
            signal: this.abortController.signal,
            cache: "default",
            headers: {
                "Cache-Control": "max-age=120"
            }
        })
            .then(response => return response.json())
            .catch(error => {
                if (error.name === "AbortError") {
                    return;
                }
                this.setError(error);
            });

Process I am following to check cache-

  1. First opening the tab which is doing the fetch request.
  2. Change the tab to different one.
  3. Return back to the tab mentioned in step 1 within the timeout period (120 sec)

While inspecting in network tab for Firefox, I can see the 'Transferred' as 'cached' and significant improvement in page loading and everything working as expected.

However, in Chrome I can still see the 'Size' with '3.9 KB' and time with some 'ms'.

I tried steps mentioned in - Is Chrome ignoring Cache-Control: max-age? without any success.

I also found - https://www.mnot.net/blog/2017/03/16/browser-caching saying

Chrome only supports max-age=0 in requests, and only with the value 0. It does not support min-fresh or max-stale.

But its little old(2017) and I am not sure it still hold true.

Also, looking at Fetch specification - https://fetch.spec.whatwg.org/#concept-request-cache-mode 'default' is cache-mode which I need, but I am not sure why it is not working across chrome

Could anyone please guide me in right direction ? What need to be done to make it work in both firefox and chrome ?

EDIT - Ok, using 'cache' as 'force-cache' works in google chrome and firefox both.

From - https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

“default” means use the default behavior of browsers when downloading resources. Is the default behavior different for firefox and chrome ? Since it is default behavior of a browser, it upto browser how they use this.

Also,

“force-cache” means that the browser will always use a cached response if a matching entry is found in the cache, ignoring the validity of the response. Thus even if a really old version of the response is found in the cache, it will always be used without validation.

I am not sure how 'force-cache' is working for chrome but this is something I don't need.

rai-gaurav
  • 536
  • 1
  • 8
  • 19
  • I've only set the max-age in the server side, when sending back a response. It seems in your example that you are setting it client side, when making the request? – mortb Feb 27 '20 at 07:46
  • Yes, I am setting it on client-side. I don't have that much control over the server side response as it is third party. – rai-gaurav Feb 27 '20 at 08:07
  • Here it is suggested that you use local storage: https://stackoverflow.com/questions/12770185/whats-the-best-way-use-caching-data-in-js-on-client-side – mortb Feb 27 '20 at 08:42
  • You can read more here. https://stackoverflow.com/questions/46339832/can-a-user-agent-set-a-max-age-greater-than-zero-in-its-request – mortb Feb 27 '20 at 09:47
  • Thanks, I will check it out. I have tried to use 'session storage' which is working. I have put a workaround also for the expiry date. Only thing is I can see few seconds of lag. While changing tab, the browser get hang/sticky for 2-3 seconds before rendering the cache.This doesn't looks good. – rai-gaurav Mar 02 '20 at 06:56
  • I have not worked with local storage, but 2-3 seconds sounds slow. Maybe you can do a performance recording (profiling) in Chrome? The profiling may show in which part of the code the time is spent. – mortb Mar 02 '20 at 09:47
  • I face the same issue right now, fetch is ignoring the max-age directive in chrome but works fine in firefox. In my case the Cache-Control header is sent by the server. – rpg600 Apr 05 '20 at 16:34
  • @Maverick do you use self signed ssl certificate ? – rpg600 Apr 06 '20 at 10:13
  • @rpg600 yes, I am using self signed ssl cert. – rai-gaurav Apr 06 '20 at 17:25

1 Answers1

5

This is a chrome/chromium issue reported in 2011 and still open:

With self-signed SSL certificates, Chrome completely ignores all caching directives, and always reloads all content.

https://bugs.chromium.org/p/chromium/issues/detail?id=103875

I see some alternatives:

  • You can become a CA, sign your certificates as a CA and import this CA in the chrome Authorities (in chrome://settings/certificates), see Getting Chrome to accept self-signed localhost certificate for more details. This is the solution I use for the moment.
  • Use a free ssl certificate with Letsencrypt. It didn't worked for me because I use the .docker domain and it's not a valid public suffix and thus can't get a certificate.
  • You can use http urls instead of https for cache testing but Chrome will trigger a mixed content error that you need to disable in the chrome settings.
  • Just use Firefox for cache testing.

Hope this helps, Good luck.

rpg600
  • 2,800
  • 18
  • 24
  • Thanks for the bug link and alternatives. I have given up on this issue sometimes back and started using firefox. I will try to use the given alternatives. Many thanks – rai-gaurav Apr 08 '20 at 14:36