How can I force clients to refresh JavaScript files?

This tutorial teaches us to force clients to refresh JavaScript files. 

Now, the question is, why do we need to force clients to refresh the JavaScript files? Let’s understand it by example issue. Suppose we have deployed the application and lots of users are using our application. Now, to improve the performance and UI of the application, we will continuously work on our application and upgrade its version after every period. Obviously, after upgrading our application’s version, we will also push that into production. But sometimes, on the user's screen, client-side JavaScript or CSS is not upgraded, and it shows the old version of our application even if we have pushed new code to the production environment.

Can you think about why this issue happens? Well, continue to read to know the answer. When users open our application in the browser for the first time, the browser stores the cache for that webpage in the local storage. So, when a user visits the webpage the next time from the same browser, it doesn’t take too much time to load due to the stored cache. So, in our case, the stored cache creates the issue. We have upgraded the application's code to the production environment, but the browser takes the CSS and JavaScript files from the local storage, or we can say cache. Rather than reloading the new file from the server, the browser loads from the cache and shows the user the older version of the application.

We have explained some solutions below to reload the JavaScript files from the server after upgrading the application.

Hard Reload the Browser

The easiest solution is the hard reload your browser. Users can hard reload their browser by pressing ctrl + F5 or ctrl + shift + R after opening the application window. On the Mac, users can press the cmd + R. It will reload all files from the server again, and if you have updated JavaScript files, it will replace the upgraded file in the local cache of the client’s browser.

Another way to hard reload the browser is that press ctrl and click on the reload button in the top left of the browser. The Mac users must press the cmd key and click on the reload button.

Yay! This solution works as you do a hard reload; it reloads all files from the server. But is it good to tell the application users to reload their browser hard whenever upgrading the application? It is not a good practice. So, we came up the another best solution below.

Change the File Path in a Script Tag

In this approach, we will change the source URL in the JavaScript script tag to make the browser fool and reload the whole all changed files from the server again. We simply add some query parameters after the source URL of the file.

Users can follow the below syntax to edit the source URL in the source tag.

Syntax

• Old Script tag

<script type = "text/javascript" src = "script.js" > </script>

• New Script tag

<script type = "text/javascript" src = "script.js?$version" > </script>

Parameters

• version − Users can add any string as a version to keep track of the new version. The most general way is to add whatever version, but users can also add date and time to make it unique.

Example

The below example demonstrates how to append the date and time dynamically whenever version upgrades of our application.

<script type="text/javascript">  
   //get the date and time
   var currentDate = (new Date()).getTime();  
   
   //create new script element
   var newScriptElement = document.createElement("script");  
   newScriptElement.type = "text/javascript";  
   
   // add current date to URL as a query parameter
   newScriptElement.src = "script.js?" + currentDate;  
   
   // append new script element to body.
   document.body.appendChild(newScriptElement);  
</script>

Users can see that we have appended the date and time with the script file source URL in the above example. When a browser tries to find the script file with the updated URL, it will fail to get it from the local cache. After, the browser must need to reload it from the server.

In addition, the user can achieve this by editing the .htaccess file −

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(bmp|png|gif|css|js)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v50|)v=50[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=50 [R=301,L]

In such a way, we can make browsers auto-reload the JavaScript files whenever we push updates of our application to production.

It is not good practice to tell users to hard reload and clear cache to see a new version of client-side applications. So, developers can use the second approach to make it auto-reload all updated files by just adding the query parameter to the file path.