Clear HTML cache programmatically

How to clear HTML cache programmatically

HTML automatic caching is one of the popular features provided in HTML5 which makes the application page loading faster as the same page is not freshly loaded every time from the server. An issue arises when the website pages are changed but the browser shows the cached pages. So at our end, we require caching for faster page loads but we also need to update the cache when pages are updated. In short, whenever we want to release the latest changes to production we need to clear the cache at the user’s machine so that fresh files are loaded.

Although we can load fresh script and CSS files by changing the arguments in the src link path of file like –

<link href="Content/customer.css?ver=1" rel="stylesheet" />

But this change will be detected if HTML page cache is cleared. So the first important thing is to handle the cache of HTML pages.

There are meta tags for handling HTML cache, but they are not much reliable. When your sites are integrated inside websites with secure settings (like embedded third-party application iframe in Salesforce Vf Page), header meta tags stop working at our end. So, we can not depend on meta tags for handling HTML page cache.

There is also a Manifest approach for handling HTML cache, but this is going to be deprecated as per recent studies. So, the best approach to load the fresh HTML page whenever your site needs to be put on production is to handle it programmatically. This method is independent of meta tags, Manifest approach.

In javascript we can force a load of fresh HTML file by using the following method :
location.reload(true)

This method should only be fired when new changes are made to the production site. For this, we need to store the associated (custom) version of the HTML page. And whenever a new version is detected for that page, the page should get reloaded. To achieve this, we can make use of localstorage object which is a type of web storage that allows Javascript websites and apps to store and access data right in the browser with no expiration date. This means that the data stored in the browser will persist even after the browser window has been closed in the form of cached browser specific data. In localstorage, to store some custom cached parameter like applicationpagecahed version, we need to store the version in our application at that place which is not cached at the user’s machine. It can be stored in the database or configuration file like web.config in asp.net application.

Whenever we want to release our service, we can update the config file/database value to new version number. We can make a comparison if localstorage value is same as of stored database/config application version. If not, then we can fire the reload of HTML page and store the new version into localstorage. localstorage becomes empty when we clear the browser cache through browser settings (Ctrl+shift+delete), so, in that case, we can detect empty localstorage value and simply store the app version value in localstorage.

var applicationVersion="";
function getApplicationVersion() {
    var uri = "/getApplicationVersion";

    $.ajax({
        type: "GET",
        async: false,
        cache: false, // required
        url: uri,
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
            var result = JSON.parse(data);
            applicationVersion=result;
        }
    });
}

Code to use the localstorage to load the fresh html page

getApplicationVersion();

var cachedVersion = localStorage.getItem("pageCachedVersion");
if (cachedVersion == null || typeof (cachedVersion) == undefined) {
    // if localstorage is empty, then it means browser page cache does not exist  (user  might have     
    // cleared manually )
    localStorage.setItem("pageCachedVersion", pageCachedVersion);
}
if (cachedVersion != null && typeof (cachedVersion) != undefined && applicationVersion != cachedVersion) {
    // if localstorage values exists , but is not equal 
    console.log("Loading updated changes from application ...");
    localStorage.setItem("pageCachedVersion", applicationVersion);
    location.reload(true);    
}

Another consideration is here I was using ajax request to the server to get the application version, but ajax results are also cached. It creates an issue on internet explorer/edge even when server-side app version value is changed, but ajax request returns the same result.
So, you will need to set cache:false in ajax request to get fresh results.Reload approach clears HTML cache only. To go with loading fresh css and js files, you will need to combine parameter approach in reference to css and js files like this –

<link href="Content/customer.css?ver=8" rel="stylesheet" />