Javascript file not cached on firefox, causing redownload every page load

Hi all, i have a phoenix application deployed, it’s typically monolith (FE+BE) rolled into a single web server. Somehow, the main javascript file is not cached on firefox (but it is cached on chromium), this is causing huge slowdown as the main javascript file is quite big (1.8 MB gzipped) and redownloaded every page load. Please help!!

Depedencies
Phoenix 1.4.11, Elixir 1.7, Erlang/OTP 22

Deployment/Build process
which deployment process roughly following Introduction to Deployment — Phoenix v1.7.10 (mix compile → npm run deploy → mix phx.digest → mix phx.server)

Example of HTTP request (firefox vs chromium)

Firefox Request Header
GET /js/app.js HTTP/2
Host: ***
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: /
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: ***
Cookie: **** some long token and value
TE: Trailers

Firefox Response header
HTTP/2 200 OK
accept-ranges: bytes
cache-control: public
content-encoding: gzip
content-length: 1983671
content-type: application/javascript
date: Wed, 12 May 2021 04:20:33 GMT
etag: “47A0C26”
server: istio-envoy
vary: Accept-Encoding
x-envoy-upstream-service-time: 4
X-Firefox-Spdy: h2

Chromium Request header
:authority: ***
:method: GET
:path: /js/app.js
:scheme: https
accept: /
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cookie: *** random long secret token
if-none-match: “47A0C26”
referer: ***
sec-ch-ua: " Not A;Brand";v=“99”, “Chromium”;v=“90”
sec-ch-ua-mobile: ?0
sec-fetch-dest: script
sec-fetch-mode: no-cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

Chromium Response header
Status Code 304
cache-control: public
content-length: 0
date: Wed, 12 May 2021 04:21:56 GMT
etag: “47A0C26”
server: istio-envoy
vary: Accept-Encoding
x-envoy-upstream-service-time: 2

HTML for script
image

Thanks!

Use <%= static_path(@conn, "/js/app.js") %> to generate path to assets, this way Phoenix will generate a URL with long expiry date. If you don’t use static_path, then you should not cache it, because otherwise you will do a new deploy and your changes won’t be picked up.

yes, i use Routes.static_path to get the url, though result doesn’t generate URL with expiry date. maybe because it’s old version of phoenix (1.4.11) ?

    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/env.js") %>"></script>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/sidebar.js") %>"></script>

Turn out that the issue is actually only affect local installation of firefox in my machine, and after reinstall (and also testing with other firefox browser via browseling) it’s caching properly.

so sorry for misreport, and thanks for helping!