How to deal with cached CSS, JS, and image files | Prevent the browser from caching files

In that case, you have to forcefully tell the browser to fetch the updated file instead of serving the cached file. The browser cache works in such a manner that, whenever a CSS, JS, or image file is rendered in the client’s browser, the browser stores the URL of that file in its cache along with its content. When the user refreshes the page, all style, script, and img tags request the resources using the “href” and “src” attributes. The browser checks if the requested URL already exists in its cache database, if “yes” then it (browser) fetches its content from the cache database and serves it.

Source code:

[rufatabbasov]

Thank you! I checked this in my PWA and it works. It works even when I close and reopen my web app from phone home screen without manually reloading the page.

[_indrid_cold_]

Great technique! This really works well. Thank you.

[kanilapehesara]

this was really helpful. thank you much

[lakshman]

In browser where to find which files are really getting cached ?

[nirangashalutha]

Thanks a lot
I tried a lot by adding no cache headers to php file but it wasnt successfull. But this works great

[cicamedia]

how about a page, so that page wont be cache, help out please

[liftedup]

What if social media sites are caching the images and after I update it, the same title and image are the same for website preview on Facebook. How can I fix this?

[RafaelSales]

hii, can I use this for HTML tags, like <h1> text </h1>?

[JosephAli]

super thanks very smart solution for a painful problem

[itimdesigner]

this doesn't work for my src link:(

[JosephAli]

btw, im not getting the latest while using js import!

import { api_url } from