As a developer working on web applications for the past 12 years I have always had to deal with the questions like “I did not see the change on my browser, was the code updated?”.  The quick response was to clear your browser cache and cookies and restart (maybe only worked about 50% of the time). After several years of going through this process I realized that the “normal” users probably do not know how to do that or what that means.  It would also be strange to have a message on your site after each code push saying “We have updated our site, please clear your browser cache for optimal experience”.

A very basic way to avoid this issues is to create a new file path which will force the browser to download a new file.  You could rename your files for each code push  styles1-0.css and styles 1-1.css but this can be a pain to maintain.

The way I have been doing this the last few years is to have the application automatically update the file paths every time the files have actually changed.  This way I do not have to worry about manually setting version with each code push.

Below is a .NET function that will return last modified data stamp of the physical file.  This date stamp becomes the version and gets tacked on at the end of the file with a query string.  I use built in .NET caching so the requests do not have to hit the file each time it loads.

When your pages render you should see a timestamp version of it. something like

public static string GetIncludeFileVersion(string file)
{
    //check if file exists and get date
    string version = "1.0";
    try
    {
        if (HttpContext.Current != null)
        {
            //always force cache
            if (HttpContext.Current.Cache[file] == null)
            {

                if (File.Exists(HttpContext.Current.Server.MapPath(file)))
                {
                    FileInfo fileInfo = new FileInfo(HttpContext.Current.Server.MapPath(file));
                    if (fileInfo != null)
                    {
                        version = fileInfo.LastWriteTime.ToString("MMddyyyhhss");
                        HttpContext.Current.Cache.Insert(file, version, null,
                        DateTime.Now.AddHours(1), TimeSpan.Zero);
                    }
                }
            }
            else
            {
                version = HttpContext.Current.Cache[file].ToString();
            }

        }
        
    }
    catch (Exception ex)
    {
     //silent for now
    }

    return version;

}

In the ASPX or ASCX or Front end files use the code below for all of your CSS/JS/Images and other include references. You may have to put this into a control depending on how your master/aspx files are setup.
<link type="text/css" href="/library/css/styles.css?<%=Ratchet.Framework.Helper.GetIncludeFileVersion("/library/css/styles.css")%>" rel="stylesheet" />

When your pages render you should see a timestamp version of it. something like

<link type="text/css" href="/library/css/styles.css?102120101114" rel="stylesheet" />

Author

RBA Author

Leave a Reply