I am making a request to a netlify function, which makes many requests to an API and then sends a combined response to the browser. The problem is I cannot cache the response on iOS browsers. PC/Android browsers do cache it. I’ve tried many headers including “force-cache” but nothing works on iOS. Why is this? I thought it’d cache a JSON response just fine. I can’t find much info when I Google it. I want to avoid the app making too many requests to the API as there’s request limits and there’s no need to get new data every time. Once a week would suffice. I could use localStorage but I’d rather use normal built in caching if possible.
Some other notes (skip this if you want):
On a related note, I’ve been messing with headers and there’s some inconsistency I don’t understand. I tried using an etag header along with a cache-control header of “public, max-age=0, must-revalidate”. On PC/Android, there’s caching going on but there’s no 304 response. I put a timestamp (date: new Date().toUTCString()) on the response json to properly check if caching is happening, and I can see that the timestamp is old, so there’s caching. What’s happening here? Why am I not getting a 304 response (I can see the request header if-none-match is being sent with the etag and the etag matches the response etag). It almost seems like it’s a cached response from a CDN, because it’s certainly not from the browser itself.
Also, if I generate a different etag on purpose every time, just to check if it properly doesn’t get a cached response, I see that for a few minutes it does get a cached response. Why? If the etag is different every time and I’m using “cache-control: public, max-age=0, must-revalidate”, I thought it would always get a new response. After a few minutes, the response does vary. But again, the cached response is from the server/CDN and not the browser.