Static asset caching in browsers often creates deployment challenges when updated JavaScript files retain stale versions. Implementing version identifiers ensures clients recieve the most recent code while maintaining caching benefits for unchanged resources.

Server-Side Timestamp Injection

For applications with server-side processing capabilities, dynamically appending file modification timestamps to asset URLs provides a robust cache-busting mechanism. When the file changes, the URL paramter updates automatically, forcing browsers to treat it as a new resource.

In an ASP.NET environment, implement a utility method to generate versioned URLs:

public class AssetVersioning
{
    public static string GenerateFingerprintedUrl(string relativePath)
    {
        var serverPath = System.Web.Hosting.HostingEnvironment.MapPath(relativePath);
        var diskInfo = new System.IO.FileInfo(serverPath);
        
        if (!diskInfo.Exists)
            return relativePath;
            
        var modificationTicks = diskInfo.LastWriteTimeUtc.Ticks;
        return $"{relativePath}?_v={modificationTicks}";
    }
}

Reference assets in your markup using this helper:

<script src="<%= AssetVersioning.GenerateFingerprintedUrl("/assets/app.js") %>"></script>

This approach eliminates manual vertion management. The query parameter changes only when the file's last write timestamp differs from previous requests.

Client-Side Storage-Based Caching

For static HTML pages without server-side logic, implement intelligent caching using the browser's localStorage API. This technique stores script content locally and validates freshness using HTTP headers.

function VersionedScriptManager() {
    var storageSystem = (function() {
        var id = new Date().toString();
        var store, success;
        try {
            store = window.localStorage;
            store.setItem(id, id);
            success = store.getItem(id) === id;
            store.removeItem(id);
            return success ? store : null;
        } catch (exception) {
            return null;
        }
    })();
    
    function extractFilenameFromPath(path) {
        var segments = path.split('/');
        return segments[segments.length - 1];
    }
    
    function invokeScript(sourceCode) {
        var executable = new Function(sourceCode);
        executable();
    }
    
    function retrieveAndStore(assetUrl, cacheId, storeRef) {
        var request = new XMLHttpRequest();
        request.open('GET', assetUrl, false);
        request.send();
        
        if (request.status === 200) {
            storeRef.setItem(cacheId + '_data', request.responseText);
            storeRef.setItem(cacheId + '_ver', assetUrl);
            invokeScript(request.responseText);
        }
    }
    
    this.load = function(scriptPath) {
        if (!storageSystem) {
            var fallback = new XMLHttpRequest();
            fallback.open('GET', scriptPath, false);
            fallback.send();
            if (fallback.status === 200) invokeScript(fallback.responseText);
            return;
        }
        
        var identifier = extractFilenameFromPath(scriptPath);
        var checkRequest = new XMLHttpRequest();
        checkRequest.open('HEAD', scriptPath, false);
        checkRequest.send();
        
        var serverDate = checkRequest.getResponseHeader('Last-Modified');
        var versionHash = Date.parse(serverDate).toString();
        var versionedPath = scriptPath + '?_=' + versionHash;
        
        var storedVersion = storageSystem.getItem(identifier + '_ver');
        var storedContent = storageSystem.getItem(identifier + '_data');
        
        if (storedVersion !== versionedPath || !storedContent) {
            storageSystem.removeItem(identifier + '_ver');
            storageSystem.removeItem(identifier + '_data');
            retrieveAndStore(scriptPath, identifier, storageSystem);
        } else {
            invokeScript(storedContent);
        }
    };
}

Invoke the loader for your scripts:

var loader = new VersionedScriptManager();
loader.load('/scripts/application.js');

This method stores the Last-Modified header value alongside the script content. Subsequent page loads compare the cached timestamp against the server's current header, fetching new content only when the file has actually changed. This reduces bandwidth consumption while guaranteeing code freshness.