CODEWITHSUNDEEP
angulartypescriptwebglwebgl2
Kedriik
Kedriik

Reputation: 331

Disable images caching in browser

I have Earth weather web application that once per six hours receives new weather maps (as images). I want to browser to not cache these images to allow user experience fresh weather not cached from previous days. My setup is:

I've tried to add to header of index.html meta data:

  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>

These textures are loaded this way:

   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);
    }

However textures are still cached. I need to clear cache manually to experience freshly updated weather maps.

UPDATE After Reactgular and gman responses I started to look after another way of loading images. So instead of require() I added <img hidden="true" [src] = "urlwith?timestamp"> tags in my component's HTML template and provide url with timestamp after question mark. Then the rest is the same, onload function of image is triggered and my texture is loaded. However because my webgl2 application is quite performance needy I'd rather avoid another images being rendered in HTML.

Upvotes: 4

Views: 4564

Answers (1)

user128511
user128511

Reputation:

This is not a texture issue it's an <img> issue. The supposed solution is you need to send the correct headers from your server to tell the browser not to cache the texture. If you can't set the correct headers a workaround is to add query parameters to your image URL.

const imageUrl = `./Textures/dirswindsigma995.jpg?${Date.now()}`;

Now every time you request the image the browser will see a different URL

Note that it's unlikely you can use require for this.

Upvotes: 4

Related Questions