It seems that App Bridge is affecting our app’s headers, causing Cloudflare to miss the cache.
Below are the headers retrieved when accessing the javascript file for Polaris ArrowRightIcon
:
Headers when inside embedded App
HTTP/3 200
Date: Sat, 14 Dec 2024 11:38:48 GMT
Content-Type: text/javascript
Content-Security-Policy: frame-ancestors https://admin.shopify.com
ETag: W/"bde43:17f:675a9045:135e3bc7"
Referrer-Policy: strict-origin
Last-Modified: Thu, 12 Dec 2024 07:27:01 GMT
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Content-Disposition: inline; filename="ArrowRightIcon.svg-AyPxE7YK.js"
Cache-Control: max-age=14400
CF-Cache-Status: MISS
Priority: u=1,i=?0
Report-To: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?sdifferenturl"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Vary: Accept-Encoding
Server: cloudflare
CF-Ray: SAME-VALUE
Content-Encoding: zstd
Alt-Svc: h3=":443"; ma=86400
Server-Timing: cfL4;desc="?proto=QUIC&rtt=61580&min_rtt=52728&rtt_var=26095&sent=15&recv=20&lost=0&retrans=0&sent_bytes=5396&recv_bytes=5972&delivery_rate=11265&cwnd=12000&unsent_bytes=0&cid=86518d5dee277337&ts=1987&x=1"
Server-Timing: cfExtPri
Server-Timing: cfHdrFlush;dur=0
Headers when ccessing the asset url directly in our website
HTTP/2 304
Date: Sat, 14 Dec 2024 12:17:22 GMT
Content-Security-Policy: frame-ancestors https://admin.shopify.com
ETag: "bde43:17f:675a9045:135e3bc7"
Referrer-Policy: strict-origin
Last-Modified: Thu, 12 Dec 2024 07:27:01 GMT
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Content-Disposition: inline; filename="ArrowRightIcon.svg-AyPxE7YK.js"
Cache-Control: max-age=14400
CF-Cache-Status: HIT
Age: 2314
Report-To: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?differenturl"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Vary: Accept-Encoding
Server: cloudflare
CF-Ray: SAME-VALUE
Alt-Svc: h3=":443"; ma=86400
Server-Timing: cfL4;desc="?proto=TCP&rtt=2107&min_rtt=766&rtt_var=2557&sent=11&recv=13&lost=0&retrans=0&sent_bytes=5183&recv_bytes=2610&delivery_rate=5240048&cwnd=257&unsent_bytes=0&cid=263bad9358aef408&ts=4292&x=0"
X-Firefox-Spdy: h2
From the data above, it appears that Cloudflare misses the cache when the app is accessed directly but hits the cache inside the embedded app. This discrepancy might relate to how App Bridge modifies the headers.
Any insights or suggestions on how to address this issue would be greatly appreciated!