Clear multiples html and js files from cache

user_10447201 0
Viewed 99

After a release of a new UI version we need to refresh old html, css and js files from cache automatically, i've read that adding a query version (e.g ...js?v1) the browser ask to the server the current version, but to do that i need to modify the html files that are already in cache

I have also read many suggestions about using meta tags in html

<meta http-equiv="cache-control" content="no-cache" />

but in this way the browser always will ask the current version, this option means many server requests for the same file

I´ve tried using

windows.location.reload(true);

but it doesn't work either

Theres the a way using javascript to refresh disabling the cache

jquery javascript
2 Answers

The html file is not cached most of the time. Adding a query string is very effective in my experience, especially if you are using a system that can generate and add them automatically. Disabling cache all together will negatively effect load times.

The overall term for what you are trying to accomplish is "cache busting". Googling this along with the server tech you are using should provide several simple solutions.

user_87813510

I have found a solution by returning by the REST API a header with the current front-version and i've added a condition in the generic function which send all the requests to compare the a local storage item with the last version used and the version returned in the header

if the version is different, a json is called to find the files to be refreshed, then a post request is sent to each item in this way the browser updates the file.

// generic fuction to consume REST API
$.ajax({type: 'POST', url: base + url, dataType: 'json', async: true, data: data}).done(function (response, status, xhr) {

        // the version returned by the REST API
        let frontVersion = xhr.getResponseHeader('Front-Version');
     
        if (localStorage.getItem('LS_FRONT_VERSION') !== frontVersion) {
            // update the version the local storage
            localStorage.setItem('LS_FRONT_VERSION', frontVersion);

            // show an alert to the user 
            ui.alert('Reloading page...');
            
            // function to reload files from a given array
            let refresh=(items)=>{
                    //
                    let item = items.pop();
                    
                    console.log('Reloading: ', item);
                    
                    fetch(item, {method: "POST", body: ''})
                        .then(response => {
                        
                        if (items.length === 0){
                            // if there is no more items, the page is refreshed
                            window.location.reload(true);
                        } else {
                            // call the refresh function without the last reloaded item
                            refresh(items);    
                        }
                        
                    });

            };
             
            // get from a file called items.json the list of files to reload
            fetch('/js_project_lib/cache.json', {
              method: 'POST',
              body: null
            })
            .then(response => response.json())
            .then(result => {
                // call the refresh fuction with the items to be refreshed
                refresh(result);
            })
            .catch(error => {
                console.error('Error:', error);
            });
            

        } 

}).fail(function (jqXHR, textStatus) {

}).always(function () {

});
user_104472010
Related