Please read carefully before marking as dupe.
I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.
I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.
So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.
an idea can be :
use fetch api to get a container that can be use to async load the script
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
use text() method which return a promise to get text content
fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
// scriptContent contain the content of your script
// if (scriptContent.includes('version : 1.1.1')
console.log(scriptContent);
});
this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system
here is the thing
assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.
if checksum(X) != X{
location.reload()
}
would help for a security features too since it's an important project.
another way of controlling this situation is changing the main.js file's name if it is possible.
I have lots of CSS and JavaScript files. Currently I maintain versioning using something that looks like this:
modal.js?v=1.0.0
form.js?v=1.0.0
table.js?v=1.0.0
style.css?v=1.0.0
These files are loaded in multiple HTML files. When I need to change version I manually go to every HTML file and change the path like this modal.js?v=1.0.1. But it's a headache to change every files every time.
I can do versioning dynamically like this
modal.js?v=<script>(new Date()).getTime();</script>
But I have a problem here: I use file caching. I need to cache files only when the file version is updated, otherwise use old cached files.
I already tried these but they do not fulfill my requirements:
JavaScript and CSS dynamic versioning
https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect-latest-chan/
I am looking into best practice / browser-proof techniques of ensuring that the browser cache is refreshed when I push a new update to my site, containing changes to html/css/js etc.
So far I have implemented a parameter based system next to all files that are loaded but I don't believe it is working consistently across browsers.
I was thinking of implementing folder based versioning, is this a good / bad / useless option? Example:
|--Site
|--redirect.v1
|--redirect.html
|--redirect.html
|--login.v1
|--login.html
|--login.css
|--home.v1
|--index.html
|--index.css
|--shared.v1
|--js
|--bootstrap.min.js
|--tether.min.js
|--jquery-3.2.1.min.js
|--ie-detector.min.js
|--images
|--logo.jpg
|--loading.gif
|--favicons
|--favicon.ico
|--favicon-16x16.png
|--mstile-144x144
Example file loading within the HTML:
<script src="../shared.v1/js/jquery-3.2.1.min.js"></script>
<script src="../shared.v1/js/tether.min.js"></script>
<script src="../shared.v1/js/bootstrap.min.js"></script>
<script src="../etc.v1/etc/etc.min.js"></script>
If any update occurs to a file in a folder I would like to simply update the physical folder name and deceleration in the HTML.
I have a project that uses a Javascript-File for its logic:
<script src="myMagicCode.js" ></script>
When I publish a new Version, clients have to clear the cache for the new code to work.
I usually can get around this problem by adding a parameter:
<script src="myMagicCode.js?version=1.23" ></script>
But I am too lazy to do this on each release. So I want to automate this behavior.
The page containing the script-reference is pure html and can not contain any server code.
I have however server code that returns the version.
So my idea would be to change the script - code to something like
<script src="api/GetJsUrl"></script>
Where api/GetJsUrl is a GET-Action which contains something like
string url = "myMagicCode.js?Version="+GetCurrentVersion();
HttpContext.Response.AddHeader("Location", url);
return new HttpStatusCodeResult(307);
Will this force the browser to reload the JS-File when a new version is published? Or will just the api/GetJsUrl-Request be cached and I have the same issue like before?
If there are still issues: Are there better solutions?
Remark: I do NOT search for a solution that reloads the JavaScript-File every time. I need a solution that only reloads the file when I deploy a new release (the version number changes).
You can use a task runner like Grunt or Gulp:
http://gruntjs.com/
http://gulpjs.com/
They can lint, minify, build some things AND do what you want, looking to some properties file that contains the project version and editing your html.
They even can join your js file to one and replace it on your index.html:
<script src="compiled.js?_=1234567890"></script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I force the refresh of javascript files in a browser?
My application in ASP.NET MVC based and javascript files are included in .csHtml file.
I require this so that the user do not have to do a [Ctrl+F5] or manually clear cache and the most recent version of javascript file is loaded everytime in the browser.
I appreciate if some examples can be provided.
Primary technique suggested is to use a dummy paramater while including the file.
Also I do not what to change the parameter manually every time I modify a js file. Need some examples if this can be done automatically.
EDIT 1:
Please provide solution to this with ASP.NET MVC prospective.
Put a version number in the filename for your JS files (like jQuery does). Then, whenever you rev the JS files, you bump the version and change the HTML files that include it.
The jQuery file naming example:
jquery-1.8.3.js
jquery-1.9.0.js
This lets you set very long caching on your server for the JS files themselves which really helps with performance on your site. But, any time you rev the JS files, the viewer gets the new JS files immediately because the newly named files are pulled by the new HTML file because they aren't in the browser cache.
You want to use Bundling and Minification. Depending on your version of MVC, the implementation is slightly different. In the newest version, it is used by default.
Bundling and Minification will combine and minify all your scripts (and styles sheets) into one file (or multiple, depending on how you use it) and serve them up with a unique parameter. Any time a file changes in that particular bundle (and thus the user would require to download the new files) the parameter automatically changes.
For MVC3, you'll need to install Microsoft Web Optimization.
Then in your global.ascx, you'd do something like this and call it from Application_Start:
private static void SetupBundling()
{
var jsBundle = new Bundle("~/Scripts/js", typeof(JsMinify));
jsBundle.AddDirectory("~/Scripts/", "*.js", false);
jsBundle.AddDirectory("~/Scripts/anothr-good-folder/", "*.js", false);
BundleTable.Bundles.Add(jsBundle);
var randomBundle = new Bundle("~/Scripts/random", typeof(JsMinify));
randomBundle.AddFile("~/Scripts/random/main.js");
randomBundle.AddFile("~/Scripts/random/cool.js");
BundleTable.Bundles.Add(randomBundle);
var cssBundle = new Bundle("~/Content/css", typeof(CssMinify));
cssBundle.AddDirectory("~/Content/", "*.css", false);
BundleTable.Bundles.Add(cssBundle);
}
So that first bundle will bundle every .js file in your ~/Scripts folder. In your head file you can reference it like:
<script src="#Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")" type="text/javascript"></script>
And it will be rendered like:
<script src="/Scripts/js?v=-2573834892993289" type="text/javascript"></script>
And any time one of your .js files change (or .css), so will the parameter.
Similar implementation for the CSS bundle, and also if you want to reference the randomBundle only on certain pages.
You can do cache-busting by attaching a random hash or number URL parameter after each javascript file URL like so:
http://www.bestsiteonearth.yes/cool_javascript.js?cache_buster=2187sasas1289012890aohkjaiosa0990
Since that number is different each time the page is loaded the URL will not be cached. More info here. Tutorial gives PHP examples, but if you know how to create a hash or random number in any language & can attach it to a URL you are good to go.
Personally I use PHP, but the way I do this is to search the output buffer for static files, such as images, scripts and stylesheets (and audio, video, whatever), then retrieve their modification time from the filesystem and append it as /t=TIMESTAMP. I then use .htaccess to strip the timestamp off and get the original filename. This is preferred over query strings because many clients will not cache files with query strings, and it's also preferred over versioning because it updates automatically simply by modifying the file.