How to clear the cache on a users browser so they don't have to

Cached files are both a blessing and a curse depending on what your current intent is. A blessing because it allows for websites to load much faster as the resource files (css, js and images) are stored locally on the users computer. But a curse because sometimes you need to make changes to these files and you don't have access to a users machine. Which means that you can't guarantee that anyone will see your changes.

Even worse, if you have critical upates to your JavaScript files, then you could essentially end up breaking your website without knowing it. It might load correctly for you, but potentially your 

This is why "clearing the cache" typically solve 90% of a web developers problems. And your users.

To ensure that changes are always present to all users, programmer's have come up with various hacks and workarounds during the years. Everything from dynamic file names to inlining the entire CSS and JavaScript directly on the page.

The following are a few of the simplest methods that I have found in order to keep those websites up to date with the latest changes.

Adding a resource slug

The simplest way to clear a file from the cache is to simply force the browser to redownload the file and you can do that by appending a slug to the files url when requesting it.

What is a slug? The slug can be any unique string that follows the proper URL encoding format. For example assume that you have the following as a link to a CSS file on your home page.

<link rel='stylesheet' href='main.css' />

In this case the browser will cache the main.css URL and will continue to serve it from cache until the cache expires or the user manually clears it from their browsing history.

As mentioned a slug is essentially any unique string. So instead of serving the css file as shown above, your new URL would resemble the following:

<link rel='stylesheet' href='main.css?v=23424' />

Because the href attribute can be any valid URL, we are allowed to add querystring parameters to it. Note that the v parameter included has absolutely no meaning to your webpage. It's only purpose is to force the browser to download the "new" css file.

It's also important to note that the browser will still have a copy of the original css file as well. It will just serve the new one in its place.

You ideally also only want to do this when there are active changes to your files. The cache does indeed serve an important purpose when attempting to cut down on load times so you wouldn't want a users browser to load a fresh copy on every page load.

One tedious part of this method is that you will pretty much need a slug for every resource that you link to. You can of course use the same slug for every file to reduce the complexity.

The following solution might make more sense to you if you have a large number of files to clear.

Using a bundler

Bundlers are useful when you want to optimize your applications in terms of size and network speed. They essentially take your files and merge them together into one giant 'bundle'. Essentially a single resource file.

This process could involve any of the following:

- merging
- minifying
- preprocessing
- obfuscating

There are a few options that you can take when bundling files but for the most part this will depend on the framework and stack that you are using. .NET for example includes various bundling classes built into the framework. The result is typically a single file with a random filename that is optimize for performance.

If you are not on .NET however you still have plenty of options to choose from. Parcel.js is a zero configuration bundler for example that you can install through npm and run on your sites with relative ease.

But there many other libraries that you can choose from as well, so shop around and find something that matches your projects needs.

I use both of these methods typically depending on the complexity of the project but mainly depending on the number of resource files that need to be loaded.

It is important to realize that not every user that vistis your websites will see what you intend them to see.