URL images are not refreshed

[Kancho_K_]

 Hi guys,

I built an app where on some of the pages I load images via URLs. All the images are uploaded onto a web server and then loaded dynamically into the HTML of the pages. Everything is working fine with one exception: when I change an image on the server the old image is still being displayed on the mobile app. I checked this out on the emulator and found out that all the images are stored locally into a folder named Frames -> images. I tried to clear the media cache by using the intel.xdk.cache.clearMediaCache(); but nothing happens actually.

If anybody could share any experience with this it would be of a great help. Thank you very much in advance!

[John_H_Intel2]

How are you trying to display the images?
Can you provided a simplified version of your code that is having issues?

[Chris_P_Intel]

Have you tested this on device?

If you the URL is not changing then that means the browser (your app) is free to use a cached version of the resource.  If that is not the behavior you want then you have a couple approaches.

1 - Have the server return Cache-Control headers when it serves the image.  That'll prevent it from being cached.  You can also use those headers to control the cache window time. http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers

Or

2 - Change the requested URL so as to make a new request. The most common is adding a random query param: http://www.example.com/my_image.jpg?r=1808982348  where that number at the end is randomly generated so to be unique.  

Does that make sense?  If you google  "prevent browser cache image" you'll find a ton of info.

[Kancho_K_]

Thanks Chris and John!

I tried with meta tags, but it did not work. Adding a random query parameter solved my problem. Thanks for your fast and great response!

[Chris_P_Intel]

Glad it's working.

The <meta> tags would not work because it's the _images_ whose cache control would need to be determined, not the .html file itself. And images don't have <meta> tags. You'd need the server where those images are coming from to return the correct cache control headers when it serves each image.

If you don't have control over the server, then the random query is a perfectly viable option.