App bridge makes app miss cache

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!

I just found this is not related to Shopify, if you’re experiencing the same issue with cloudflare, try disabling eTags for your server, it worked for us :slight_smile:

1 Like

Glad you figured this out David and thanks for posting your solution!