How to refresh the page's cache if scripts have been updated?

Question

I searched online to find a solution for refreshing user cache if the website has been updated. Couldn't find anything apart from setting version control on url of the script files...

I'm answering my question below, and need to know if this is a perfect code and might not keep refreshing in a loop. Please could someone let me know if any modifications are required?

Answer 1

My answer involves

1. a php script that checks selected files on the server for modification date.
2. on the html page, javascript gets the data from php via jQuery getJSON.
3. Then it checks for localstorage data regarding the files, this data is first stored if none found via html5 localstorage.
4. Then it compares dates between localstorage and php jSON data.
5. If there are new files on the server, it stores the new dates instead of the old dates on the localstorage for future visits.
6. Refreshes only if newer versions of the scripts are found.

Below is the code, and here's the jsfiddle: [ ::: jsfiddle ::: ]

Snippet is not allowing localStorage, instead try js fiddle: '/xepjcwsf/'

 //Script to check (via php & javascript), if the files loaded into client's cache are old and refreshes the page if newer files found on the server. $(document).ready( function() { var newFileCacheDate; //uncomment: //$.getJSON('scripts/file_date.php', function(jsonData){ setTimeout(function(){ newFileCacheDate = {"css_1":"30-01-2015","css_2":"28-01-2015","css_3":"07-03-2015","js_1":"28-02-2015","js_2":"02-03-2015"}; //uncomment: //jsonData; var StoredData = getStorage(); var isUpdated = check_filedate(newFileCacheDate, StoredData); if(isUpdated) { console.log('files have been updated, isUpdated = true'); addNewStorage_and_refresh(newFileCacheDate); } //uncomment: //}).fail(function() { console.log( "Couldn't get the json data." ); }); }, 1000); function addNewStorage_and_refresh(newDates){ if(typeof(Storage) !== "undefined") { localStorage.setItem('filecache_date', JSON.stringify(newDates)); alert('filedate storage updated, refreshing'); location.reload(); } } function getStorage(){ if(typeof(Storage) !== "undefined") { var fileCacheDate, stored_FileDates; var dataToStore = { "css_1" : '30-01-2014', "css_2" : '28-01-2015', "css_3" : '07-03-2015', "js_1" : '28-02-2015', "js_2" : '02-03-2015' }; if (localStorage.getItem("filecache_date") === null) { localStorage.setItem('filecache_date', JSON.stringify(dataToStore)); console.log('filecache=null'); return dataToStore; } else if (localStorage.getItem("filecache_date") != null) { fileCacheDate = localStorage.getItem('filecache_date'), stored_FileDates = JSON.parse(fileCacheDate); console.log('filechache=present'); return stored_FileDates; } } } function check_filedate(newfile, oldfile){ var isItUpdated = false; $.each(oldfile, function (key, olddata) { if(Date.parse(process(olddata)) < Date.parse(process(newfile[key]))){ console.log('files have been updated = true'); isItUpdated = true; return false; } }); return isItUpdated; function process(date){ var parts = date.split("-"); return new Date(parts[2], parts[1] - 1, parts[0]); } //to convert and return date in standard format } }); /* THE PHP CODE ** Paste this PHP code as a separate "file_data.php" file for retrieving json data from ** ******************************************************************************************* <?php $filenames = array( "css_1" => 'file1_css.css', "css_2" => 'file2_css.css', "js_1" => 'file3_jscript.js', "js_2" => 'file4_jscript.js' ); $previousDate = array( "css_1" => '0', "css_2" => '0', "js_1" => '0', "js_2" => '0', ); foreach ($filenames as $jsonVar => $filename) { if (file_exists($filename)) { $mtime = filemtime($filename); $previousDate[$jsonVar] = date ("dmY", $mtime); } } echo json_encode($previousDate); ?> ******************************************************************************************* */ //Below code for demo purpose only. $(document).ready( function() { $('button#reset').on('click', function(){ localStorage.removeItem('filecache_date'); location.reload(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Check Console for Logs --> Check Console for Logs <br><br> If you were unable to see console log before page refresh, click on the reset button <br> (page will refresh after resetting localStorage data) <br><br> <button id="reset">Reset </button> <br><br> EDIT: Although jsfiddle allows localstorage, the stackoverflow snippet tool doesn't allow it, so this code might not function on stackoverflow.<br><br> <b style="color:red;">Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.</b>