How to Stop Browser Caching, Not Caching Files

This article focuses on how to prevent browsers from caching static resources and ensure that the latest resources are obtained every time. If you want to know how not to cache files, you need to understand how browsers determine whether to cache files. Here to introduce a concept, that is, browser caching.

Browser caching (Brower Caching) means that the browser stores the documents that the user has recently requested on the local disk. When the visitor visits the same page again, the browser can load the document directly from the local disk. There are two main types of browser caching, cache negotiation and thorough caching, also known as "negotiated caching" and "strong caching".

Next, let's take a look at four ways to block browser caching.

Use no-store to Stop Browsers from Caching Files

The above describes how the browser caches files, which mentions the no-store instruction of the Cache-control that forces the cache. What it does is not store anything about client requests or server responses, i.e. without using any caching.

It should be noted that Cache-Control is a general-header field, which can be used for both request headers and response headers. Send the following response headers to disable caching.

Cache-Control: no-store

Here are some additional examples from MDN to illustrate how to configure other scenarios.

Cache Static Resources

For files that don't change in your application, you can usually add aggressive caching before sending response headers. This includes e.g. static files such as images, CSS files, and JavaScript files served by the application.

Cache-Control:public, max-age=31536000

Revalidation Required

Specify no-cache or max-age=0, must-revalidate indicates that the client can cache the resource. Each time a cached resource is used, its validity must be revalidated. This means that an HTTP request is made every time. But the download of the HTTP response body can be skipped while the cached content is still valid.

Cache-Control: no-cache

Cache-Control: max-age=0, must-revalidate

Note: The following directives may cause the cache to be used if the server goes down or loses connection.

Cache-Control: max-age=0

Increase the Version Number to Stop Browsers from Caching Files

This method does not need to rely on the server and can be implemented by a pure front-end. This method was popular before the birth of front-end engineering. The disadvantage is that the version number needs to be manually increased, which requires more human intervention.

<script type="text/javascript" src="../js/jquery.min.js?version=1.7.2" ></script>

Use Random Numbers to Stop Browsers from Caching Files

Since adding a fingerprint to the file allows the browser to retrieve the resource, we can splice random numbers or timestamps later. This achieves the same purpose, but also saves the step of manually changing the version number.

Specifically, you can add a script to index.html to dynamically generate a script tag, introduce static resources, and splice timestamps.

var script = document.createElement("script");
script.src = "/resource/options/myjs.js?randomId=" + new Date().getTime();
document.body.appendChild(script);

In this way, every time the browser is refreshed, a static resource containing a timestamp will be dynamically generated. When the browser finds that the file name has changed, it will re-fetch the static resources to achieve the purpose of not caching the file.

Disable Browsers Caching with HTML

HTML can also disable caching by adding meta tags to the head tag of the page.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

Note: Although caching can be disabled, only some browsers support it. Since proxies don't parse HTML documents, proxy servers don't support this either. This method does not apply to the requirement that specific files are not cached.

Summary

This article summarizes how to get your browser to not cache files. There are four ways, including:

Finally, the method of splicing timestamps behind static resource files is used to achieve the purpose of not caching files.