1

I have a very simple angular project, with interval that cyclic add an image and remove it after some seconds.

The image have an header Cache-control: max-age: 60.

I'm monitoring the request that the page sends, and I see that it creates only one request for the first time the image is added.

After the first request, the page never validate the image freshness. So, if I replace the image at the server, the client never get the new image.

What is the reason, and what I can do?

Sample project:

https://stackblitz.com/edit/angular-cache-control?file=src%2Fapp%2Fapp.component.html

JudahA
  • 77
  • 10

3 Answers3

2

it might not be the best solution, but you can trick the browser into thinking the source changed by applying a semi-random query parameter to your query.

in this example the image will be loaded with the query param ?cacheBust=CURRENT_TIMESTAMP

every time you change the image/toggle its visiblity the timestamp will be updated to a new value.

https://stackblitz.com/edit/angular-cache-control-rhcqh5?file=src/app/app.component.html

capc0
  • 503
  • 3
  • 20
  • This DOES seem to actually be the best solution. This is a browser issue, not an Angular issue, but you can cache-bust by adding a query string to the end of the image URL. – Eliezer Berlin Sep 18 '20 at 11:46
  • @EliezerBerlin is right. This is a browser issue. But the solution in not good for me, because I don't want query a new image every time. – JudahA Sep 21 '20 at 10:07
  • @JudahA ...If you want the browser to redownload the image, then add a query string, or force a page refresh... Otherwise he's not going to try to redownload the image, because he already has it in cache. – Eliezer Berlin Sep 21 '20 at 13:15
  • I don't want query a new image every time. I want to honor and follow the http ```Cache-control``` header. – JudahA Sep 22 '20 at 01:10
0

If Image change is frequent then you need to add some random string in image url so every time it will fetch new image.

If image change is frequent then add current time stamp.

If image change is days then you can add new random string base on date.

If your image name is dynamic I mean you will be getting image name from server then change image name everytime so it will get fresh image.

Sanjay
  • 2,265
  • 1
  • 11
  • 26
0

My answer: It is not possible.

Probably, the brwoser has a cache ending that save the image, even after it is removed from DOM. So, when I add he image again to the DOM, the browser doesn't create a new request.

JudahA
  • 77
  • 10