JeZxLee Posted February 21, 2017 Share Posted February 21, 2017 Hi, We have a cool HTML5 based company website at the below URL link: www.16BitSoft.com We have a problem when we update the above HTML5 website: When we modify a JavaScript file and upload it to the above HTML5 website the website does not use the updated JavaScript file we edited? Even after a browser page refresh the updated JavaScript file is still not used? Only when we clear browser's Internet cache then the updated JavaScript file is used? Anyone know how to fix the above issue? Thanks! JeZxLee Quote Link to comment Share on other sites More sharing options...
alex_h Posted February 21, 2017 Share Posted February 21, 2017 one approach is to include a version number in the .js file name. Each time you modify the file, increment the number and update the script tag in your html file accordingly. It's quite easy to automate this process using your build system of choice. Otherwise any old cache-buster system based on the date would work - you basically append '?foo={some random value}' to the url of the js file when requesting it. The disadvantage of this approach is that the file is then always downloaded as new even when it hasn't actually changed, meaning your site takes longer to load. Quote Link to comment Share on other sites More sharing options...
JeZxLee Posted February 21, 2017 Author Share Posted February 21, 2017 5 hours ago, alex_h said: ... Otherwise any old cache-buster system based on the date would work - you basically append '?foo={some random value}' to the url of the js file when requesting it. The disadvantage of this approach is that the file is then always downloaded as new even when it hasn't actually changed, meaning your site takes longer to load. Hi, Thanks for the reply... How would I do the above? Thanks! Below is our index.html file: <!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8"/> <LINK REL="SHORTCUT ICON" HREF="http://www.16bitsoft.com/favicon.ico"> <title>16BitSoft Inc.</title> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="audio.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="initialize.js"></script> <script type="text/javascript" src="input.js"></script> <script type="text/javascript" src="interface.js"></script> <script type="text/javascript" src="logic.js"></script> <script type="text/javascript" src="screens.js"></script> <script type="text/javascript" src="visuals.js"></script> </head> <!-- JeZxLee's _ _ _____ __ __ _ _ _ _ _____ | | | | |_ _| | \/ | | | | | | | (_) | ___| | |_| | | | | . . | | | | | | | ___ _ __ ___ _ ___ _ __ |___ \ | _ | | | | |\/| | | | | | | |/ _ \ '__/ __| |/ _ \| '_ \ \ \ | | | | _ | | _ | | | | _ | |___ _ \ \_/ / __/ | \__ \ | (_) | | | | /\__/ / |_| |_|(_)|_|(_)|_| |_|(_)|_____|(_) \___/ \___|_| |___/_|\___/|_| |_| \____/ _____ ______ _____ _____ _ / __ \| _ \ | __ \ | ___| (_) `' / /'| | | | | | \/ __ _ _ __ ___ ___ | |__ _ __ __ _ _ _ __ ___ / / | | | | | | __ / _` | '_ ` _ \ / _ \ | __| '_ \ / _` | | '_ \ / _ \ ./ /___| |/ / | |_\ \ (_| | | | | | | __/ | |__| | | | (_| | | | | | __/ \_____/|___/ \____/\__,_|_| |_| |_|\___| \____/_| |_|\__, |_|_| |_|\___| __/ | |___/ TM Code Named: "Mustang GT 5.0 SuperCharged" (For Windows/Linux/Mac OS X) .......................................................................... The NEW "16BitSoft Inc." Version 3.0 HTML5/JS Website! .......................................................................... By Team 16BitSoft ([email protected]) (C)opyright 2016 By 16BitSoft Inc. www.16BitSoft.com .......................................................................... --> <body onload="Init()"> <div style="font-family: Ubuntu, sans-serif;"> </div> </body> JeZxLee Quote Link to comment Share on other sites More sharing options...
alex_h Posted February 22, 2017 Share Posted February 22, 2017 Instead of this: <script type="text/javascript" src="logic.js"></script> use something like this: <script type="text/javascript"> document.write('<script type="text/javascript" src="logic.js?cachebuster=' +Date.now()+'"></script>'); </script> Quote Link to comment Share on other sites More sharing options...
BobF Posted February 22, 2017 Share Posted February 22, 2017 Alex_h's solution works well, but it completely disables caching which adds unnecessary server load and increases load time for the end user. I like his other suggestion better which is to do something like this: <script type="text/javascript" src="logic.js?ver=1.2.3"></script> This simple solution preserves the advantages of caching. However, you have to either manually update the version number every time logic.js changes, or else set up your build tools to update the version number for you. PHP to the rescue: <script type="text/javascript" src="logic.js?cb=<?php echo date("dHis",filemtime("logic.js")) ?>"></script> This solution preserves caching while ensuring the end user always receives the latest version of logic.js, but without the need for manual updates or build tool changes. alex_h 1 Quote Link to comment Share on other sites More sharing options...
prvi_treti Posted February 23, 2017 Share Posted February 23, 2017 Just for the records Ctrl+F5 forces browser to reload everything unlike mere F5 refresh Quote Link to comment Share on other sites More sharing options...
BobF Posted February 24, 2017 Share Posted February 24, 2017 On 2/23/2017 at 6:07 AM, mUnduli said: Just for the records Ctrl+F5 forces browser to reload everything unlike mere F5 refresh That's for Firefox.On Chrome it's Shift+F5. I don't remember about the other browsers offhand. Most browser debug tools include a control to temporarily disable use of the cache, but the shortcut key can be handy to give to end users to resolve cache related issues.. Quote Link to comment Share on other sites More sharing options...
prvi_treti Posted February 25, 2017 Share Posted February 25, 2017 11 hours ago, BobF said: That's for Firefox.On Chrome it's Shift+F5. I don't remember about the other browsers offhand. Most browser debug tools include a control to temporarily disable use of the cache, but the shortcut key can be handy to give to end users to resolve cache related issues.. Sorry , I'm not Chrome user (it's a ridiculous browser imo) , IE is also with Ctrl if I am not mistaken. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.