image caching issues

[beckyann...@gmail.com]

Hi JATOS team and users,

We've been struggling with image caching problems on older versions of MacOS/iOS (prior to BigSur/14.1). I initially thought this was a JavaScript issue, but after lots of investigating, I now think it's related to our server's HTTP response settings. 

We set up our experiments so that any image (or other media files) are preloaded at the start of the experiment. The problem is that, on some MacOS/iOS devices, the files are requested again over the network every time they're needed during the experiment, instead of loading from the browser cache. Here's an example of our image headers:

I think the problem might be that there's no max-age/Expires or ETag values in the response header. I'm not sure what the defaults are, but maybe when these are missing, it's up to the browser to decide whether the file is cache-able or needs to be requested again every time? We tried loading the files from a different server and found that this can solve the problem on the exact same OS/browser. Here's an example of the response header for an image that is loaded from a different server - in this case, the multiple-request problem doesn't occur.

So I think I need to change our server's Cache-Control setting for media files to something like "public, max-age=31536000", and maybe add an ETag and/or Last-Modified? If so, I'm not sure how to do this. I wonder if anyone who is using JATOS with Nginx could share their cache-related config settings with me? 

Thanks!

Becky

[Kristian Lange]

Hi Becky,

I checked in JATOS code and you seem to be right: JATOS only sets "Cache-Control" header with the value "private". And although I'm not an expert in browser caching, from what I read, one should set the headers "Max-Age" or "E-Tag" too - like you suggested. This I have to fix in JATOS. But this will take some time and you need a more immediate solution. Your idea with adding headers in Nginx should work, although I've never done it for this purpose myself.

You have to specify a 'location' with a RegEx and then the header. Nginx somehow turns the 'expires' command into the 'Max-Age' header.

E.g. so to cache all images for 1 hour in the browser this should do (add it to your nginx.conf within the 'server' block):

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {

    expires 1h;

}

Or if you want to cache every response during a study run (and nothing from JATOS GUI) this:

location ~ "/(publix/[\d]+/[\d]+/.+)" {

    expires 1h;

}

And probably even better: All images during a study run:

location ~ "/(publix/[\d]+/[\d]+/.+\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$)" {

    expires 1h;

}

I never tested them but I'm pretty confident something like this will work :)

Best,

Kristian

[beckyann...@gmail.com]

Hi Kristian,

Thanks very much for looking into this and for explaining how to set it up. Much appreciated!!

Cheers,

Becky