In order to provide users with fresh weather updates, my Earth weather web application receives new weather maps every six hours as images. I want to prevent the browser from caching these images to ensure that the user always sees the most current data, rather than cached images from previous days. Here is my setup:
- I have an Angular 2 application built using the --prod parameter and uploaded to hosting via FTP.
- I utilize a Python "backend" that downloads grib data once every six hours, converts it to images, and uploads them to the FTP server.
I attempted to add the following meta tags to the header of index.html:
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
The textures are loaded in this manner:
this.ParticlesVelocitiesImage = new Image();
this.ParticlesVelocitiesImage.src = require('./Textures/dirswindsigma995.jpg');
this.ParticlesVelocitiesImage.onload = () => {
this.ParticlesVelocities = this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, this.ParticlesVelocities);
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.ParticlesVelocitiesImage.width,
this.ParticlesVelocitiesImage.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.ParticlesVelocitiesImage)
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
}
Despite my efforts, the textures continue to be cached. This requires me to manually clear the cache to view the updated weather maps.
UPDATE
Upon receiving feedback from Reactgular and gman, I began exploring alternative methods for loading images. Instead of using require(), I decided to add
<img hidden="true" [src] = "urlwith?timestamp">onload function triggers the loading of the texture. However, due to the performance demands of my WebGL2 application, I prefer to avoid additional images being rendered in the HTML.