Overview

When updates are made to the DNN CSS and JavaScript files, visitors will need to clear their browser cache before the changes are seen. However, it's possible to increment the version number of the DNN site which will cause visitors browsers to automatically grab the new versions of the files the next time they navigate to the site.

Prerequisites

• Read/Write access to the sites' root directory

Diagnosis

Browser caching stores static files which may result in loading an older version of the file instead of the new one. To fix this, there is a method called cache busting that makes use of file versions which tells the browser to make use of the new version instead of the old one.

Solution

To make use of cache busting, you need to incorporate it with the CSS file version control mechanism.

For example, a CSS file named mycssfile.css has been updated to contain new changes and you want it to be reflected immediately when your users are browsing the site.

The CSS file will be called somewhere within a user control file (.ascx) that is located in the appropriate skins folder (whichever skin is being used by the site). The skins folder is located on the site's root directory via the path \Portals\_default\Skins.

Let's just say the name of the user control file is mycss.ascx. Open this file using a text editor or Visual Studio. You should be able to find a line that calls for our CSS file. In this case, it's the mycssfile.css. The line of code should be something like below:

  <link href="myskinpath/css/mycssfile.css" type="text/css" rel="stylesheet">

To make use of file versioning, we simply append the CSS file path with ?v=1. Take note that the 1 will be the version number and should be incremented every time a change is made to the file. The updated line of code then becomes:

  <link href="myskinpath/css/mycssfile.css?v=1" type="text/css" rel="stylesheet">

Save the changes made to the mycss.ascx file and reload the site again.

1. Log in to your DNN instance. 
2. Go to Persona Bar > Settings > Servers.
3. Click on the Server Settings tab and then the Performance sub-tab. 
4. Take note of the Current Host Version.
5. Click on the Increment Version button.
6. The following warning will come up:
7. Click on the Yes button. 
8. The following pop-up will validate that the version has been incremented successfully:
9. You may further validate by looking at the Current Host Version, which should be one number higher than before. 

Testing

The new changes in the CSS/JavaScript file should now be reflected when reloading the site via the browser.