3

This is a question about browsers in general, but I'm primarily concerned with Chrome.

Let's say I have the following snippet in a file, index.html:

<img src='//path/to/foo.img'></img>

and foo.img changes on my server every hour. I want to prefetch this image on the hour so that when the user refreshes the page, the updated image //path/to/foo.img is read from the browser's HTTP cache.

There are a few things I'm uncertain about:

  1. Are the responses for XHRs cached at all by default?
  2. If so, do they use a separate cache from the one the browser uses when fetching things like img, css, js, etc. requests?
  3. If the answer to #2 is no, then is it sufficient to send an XHR for //path/to/foo.img in order to cause the response to be cached - and then re-used by the browser when the page is refreshed?
kjh
  • 3,407
  • 8
  • 42
  • 79
  • 1
    XHR requests are cached in the same cache as other files, and depends on the headers send with the request and the ones received from the server. But you should be able to observe this youself in the network tab in the developer tools. – t.niese Aug 02 '17 at 05:03
  • 1
    A POST will never be cached, but a GET will get cached according to the headers in the response. It all goes in the same cache so you can do what I think you want to do (preload the image). Press F12 (Network tab) and try it though, you'll very quickly see if/when something is cached. (Just don't get confused by chrome sending an OPTIONS request to the same path) – Rory Aug 02 '17 at 05:13
  • @kjh If the answer resolved your problem then you should accept the answer. – Ataur Rahman Munna Aug 02 '17 at 06:57

2 Answers2

0

Normally Browser caches image, js and css files. If you are using image path or fixed image url for image src then you should add a random nonce [usually a random number] with the image url every time. so your image path will be something like that, 

<img src='//path/to/foo.img?1234567'></img>

This will ensure that your previous image or cached image doesn't load. Always load new image from server though the page refreshed again and again.

Ataur Rahman Munna
  • 3,887
  • 1
  • 23
  • 34
  • This is not what I am looking for. My issue isn't that I don't know how to force the browser to fetch the latest version of a file. My issue is that I need to *prefetch* the new version of a file asynchronously so that when the page is refreshed, the new file is retrieved from the cache instead of being fetched over the network. – kjh Aug 02 '17 at 07:01
-1

To force the browser to load a new version of a file that's already in cache, do the following:

  1. Create a hidden iframe with the <img> tag in that iframe
  2. Also add some JavaScript to that iframe that will call location.reload(true); This will force the iframe and all resources linked within it to reload from the server and repopulate the browser cache.
  3. Make sure it only calls it once, or you'll go into an infinite loop. You can do this by setting a cookie, or updating location.hash or checking resource timing to see if the resource was fetched over the network before the reload.

You can see http://www.lognormal.com/blog/2012/06/17/more-on-updating-boomerang/ and http://www.lognormal.com/blog/2012/06/05/updating-cached-boomerang/ for some details.

bluesmoon
  • 3,918
  • 3
  • 25
  • 30