Browser random behaviour in using cache and reloading for js/css from server despite setting cache-control header

Question

I have set cache-control header in my nginx conf file successfully for js/css files.

location ~* \.(css|js)$ {
      add_header Pragma public;
      add_header Cache-Control "public, must-revalidate, proxy-revalidate, max-age=305360000, s-maxage=305360000";
    }

But the js/css files are randomly loaded from cache and server on page refreshes. What exactly tells browser to re-load the files from the cache other than cache-control header?

Request headers when file is loaded from cache:

Provisional headers are shown. Disable cache to see full headers.
Learn more
Referer: https://hacdomain/login/?next=%2Fui%2F%23%2Fdashboard
sec-ch-ua: "Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Response headers when file is loaded from cache:

c-trace: a37def20-1192-48e2-8664-6b819d7d768f
cache-control: public, must-revalidate, proxy-revalidate, max-age=305360000, s-maxage=305360000
content-encoding: gzip
content-security-policy: default-src 'self' data: mediastream: blob: filesystem: 'unsafe-inline' 'unsafe-eval'
content-type: application/javascript; charset=utf-8
date: Wed, 14 Dec 2022 07:50:34 GMT
etag: W/"62db1945-6ecb68"
last-modified: Fri, 22 Jul 2022 21:40:21 GMT
pragma: public
referrer-policy: same-origin
strict-transport-security: max-age=31536000; includeSubDomains
transfer-encoding: chunked
vary: Accept-Encoding
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1

Request headers when file request goes to server:

Accept: text/css,*/*;q=0.1
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,hi;q=0.7
Connection: keep-alive
Cookie: watcher.session_id=MTY3MTAwMzE2MHxOd3dBTkZBMFdFODNVMVZHV1ZoRVVVWllRVFpXV0VWRFIwMU5XVmRUUkVkWlRFdFRNMFkyVFVkSU4wdE5OMWsxVEZGV1FVZEVUMEU9fPRrNkIO81Pe0pho9cQJCkXH3cPrpYFumxaPLZdT1snG
Host: hacdomain
Referer: https://hacdomain/login/?next=%2Fui%2F%23%2Fdashboard
sec-ch-ua: "Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: style
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Response headers when request is server by server:

c-trace: 3880cc51-32a0-477c-aac1-63d60107062f
cache-control: public, must-revalidate, proxy-revalidate, max-age=305360000, s-maxage=305360000
content-encoding: gzip
content-security-policy: default-src 'self' data: mediastream: blob: filesystem: 'unsafe-inline' 'unsafe-eval'
content-type: text/css
date: Wed, 14 Dec 2022 07:51:40 GMT
etag: W/"62db1945-37f0f"
last-modified: Fri, 22 Jul 2022 21:40:21 GMT
pragma: public
referrer-policy: same-origin
strict-transport-security: max-age=31536000; includeSubDomains
transfer-encoding: chunked
vary: Accept-Encoding
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1

Answer 1

Browser started using the cache as per defined age after importing valid CA signed certificates of the server to the browser.