Me gustaría actualizar una imagen en una página web cada N segundos. La forma común de hacer esto es agregar ?t= a la fuente de la imagen:

 function refreshImage(){ document.getElementById('img1').src='https://someserver/cam?t='+ new Date(); } window.setInterval(refreshImage,5000);

Sin embargo, esto puede romper servidores proxy de caché como NGINX o CloudFront. Por ejemplo, si la memoria caché incluye t= en la clave de la memoria caché, se mantendrán varias copias en la memoria caché. Podemos excluir t= de la clave de caché, y esto se resuelve, pero aún significa que el navegador regresa a la red en cada solicitud, y el caché del navegador se llenará innecesariamente. Y significa que el proxy tiene que ser diferente para las imágenes.

He visto en otra parte que se supone que esto funciona:

 function refreshImage(){ document.getElementById('img1').src='https://someserver/cam#t='+ new Date(); } window.setInterval(refreshImage,5000);

Pero en mis pruebas, no lo hace.

En su lugar, podemos incluir Cache-Control:no-store en la respuesta de la imagen y hacer esto:

 function refreshImage(){ document.getElementById('img1').src='https://someserver/cam'; } window.setInterval(refreshImage,5000);

Sin embargo, esto rompe los cachés de proxy, diciéndoles que no almacenen la imagen en absoluto.

Preferiría hacer esto de una manera que sea amigable tanto para los cachés de proxy como para el caché del navegador. En mi opinión, sería mejor servir la imagen con, por ejemplo, Cache-Control:max-age=30, y almacenarla en caché durante 30 segundos tanto en el navegador como en el proxy. El navegador no debería tener que agregar una marca de tiempo, y no debería volver a preguntar por 30 segundos, y si otro navegador lo hace, el caché del proxy debería servir su copia por 30 segundos. El origen solo debería ver una solicitud cada 30 s.

Entiendo que probablemente debería simplemente hacer? t = y terminar con eso, pero estoy tratando de entender mejor por qué es así y si hay alguna manera mejor. ¿Estoy malinterpretando lo que debería estar sucediendo aquí? ¿Hay alguna forma de hacer que los navegadores respeten Cache-control:max-age=30 para las solicitudes de imágenes? ¿Algún encabezado de caché que me falta?