I’ve built a capacitor app that has a search feature for venues with banner images. The images are being loaded in from my website, using http in the source attribute. The issue I’m facing is that every time a new image loads in, it is being cached. Overtime, these images are building up to a very large cache.
I’ve been searching all over the internet but cannot find any resources regarding this issue. Perhaps there’s a way to clear the cache or somehow limit it?
Could someone please assist me with fixing this issue. Any assistance would be appreciated.
Thanks in advance!
i usually use a “random name system”
i’ve made a simple javascript function that adds a parameter to each image i use, with the current time stamp
so i get something like ./assets/img/myimage&20240402123045.jpg
the next time i try to load the image, it has a new timestamp and it’s not cached
This solution prevents cached images from overriding the latest version of the image. Will it prevent or remove older cached images? Because If it is still caching the new images then it will have an even larger cache
if you save all the images with this “trick” you won’t have anything cached
Won’t the browser just cache each image URL separately due to the unique timestamp parameter? Overtime this will build up an even larger cache. Or does it immediately remove/un-cache old resources that aren’t loaded in. I’m not sure how this solution saves app size. The problem I have is that when someone uses my app and sees a bunch of images, they all get cached and overtime it blows up the app size.
Use the no cache options then
Send the Cache-Control: no-store header from your backend server when serving the images (reference).
1 Like
Seems to have done the trick. Thanks
1 Like