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 - 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 - '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 - /

“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.

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/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/#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/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.

• javascript
• reactjs
• google-chrome
• fetch
• browser-cache

• 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 Commented Feb 27, 2020 at 7: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 Commented Feb 27, 2020 at 8:07
• Here it is suggested that you use local storage: stackoverflow./questions/12770185/… – mortb Commented Feb 27, 2020 at 8:42
• You can read more here. stackoverflow./questions/46339832/… – mortb Commented Feb 27, 2020 at 9: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 Commented Mar 2, 2020 at 6:56

2 Answers 2

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

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

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

I see some alternatives:

• You can bee 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.

I solved this by setting Cache-Control on the server side